# 🚀grid布局

📅 2023/6/9

# 概念解读

✨在线grid布局生成器 (opens new window)
Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
容器和项目：我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目，其直系子元素将成为网格项目。
网格轨道：grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。
网格单元：一个网格单元是在一个网格元素中最小的单位，从概念上来讲其实它和表格的一个单元格很像。
网格线：划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3...顺序进行编号排序

# 容器属性

1.display属性

通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器

2.grid-template-columns 属性和 grid-template-rows 属性

grid-template-columns设置列宽，例如grid-template-columns:100px 100px 100px
grid-template-rows设置行高，例如grid-template-rows:50px 50px
repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。例如grid-template-columns:repeat(3,100px)
auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素。
fr 关键字：fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。
minmax() 函数：设置网格元素的最小和最大尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。
auto 关键字：由浏览器决定长度。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度。

3.row-gap 属性、column-gap 属性以及 gap 属性

row-gap 属性、column-gap 属性分别设置行间距和列间距。gap 属性是两者的简写形式。例如：row-gap: 10px 表示行间距为10px，column-gap:5px 标识列间距为5px，gap:10px 5px; 与前面两句实现效果相同。
上述三个属性之前写做grid-row-gap 、grid-column-gap以及 grid-gap 属性，但是目前已经从标准去除，不推荐。

4.grid-template-areas属性和grid-area属性

grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成，但需要注意的是定义的区域需要是正方向或者长方形；grid-area属于项目属性，在项目中通过grid-area指定区域名称。

.grid{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 120px  120px  120px;
    grid-template-rows: 60px 60px;
    grid-template-areas:
    ". header  header"
    "sidebar content content";
}
.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.header {
    grid-area: header;
}
/*
    点（.）代表空的单元格
    .grid为项目的相关样式
    .sidebar .header .content 分别为侧边栏，头部及内容区域的相关类名，通过grid-area指定区域。
*/

实现效果 5.grid-auto-flow 属性

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，这个顺序由 grid-auto-flow 属性决定，默认值是 row。

🗃️先行后列的布局 🗃️先列后行的布局 🗃️先行后列的布局中可以发现第五个项目和第六个项目之间有个空白（红圈标识），这个是由于第六块的长度大于了空白处的长度，被挤到了下一行导致的。在实际应用中，我们可能想让下面长度合适的填满这个空白，这个时候可以设置 grid-auto-flow: row dense，表示尽可能填满表格。

6.justify-items 属性、align-items 属性以及 place-items 属性

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下），place-items 为justify-items与align-items的合并写法。以 justify-items 属性为例进行示例，align-items 属性同理，只是方向为垂直方向。justify-items: start | end | center | stretch

🗃️start：对齐单元格的起始边缘
start
🗃️end：对齐单元格的结束边缘
end
🗃️center：单元格内部居中
center
🗃️stretch：拉伸，占满单元格的整个宽度（默认值）
stretch

7.justify-content 属性、align-content 属性以及 place-content 属性

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。place-content 为justify-content与align-content的合并写法。他们的属性可设置为justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

🗃️start：对齐容器的起始边框
start
🗃️end：对齐容器的结束边框
end
🗃️center：容器内部居中
center
🗃️space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

🗃️space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔

🗃️space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

🗃️stretch：项目大小没有指定时，拉伸占据整个网格容器 stretch