Grid布局，又称为CSS网格布局，是W3C提出的一个二维布局系统，它允许开发者以行和列的形式来布局网页内容。以下是Grid布局属性的详细解析：
一、容器属性
-
display
- grid：将元素设置为块级网格容器。
- inline-grid：将元素设置为行内网格容器。
-
定义网格轨道（行和列）
- grid-template-columns：定义网格的列数及其大小。可以使用长度单位（如px、em等）、百分比（%）或fr单位（表示剩余空间的比例分配）。
- grid-template-rows：定义网格的行数及其大小。与grid-template-columns类似，也可以使用长度单位、百分比或fr单位。
示例：
.grid-container {display: grid;grid-template-columns: 100px 1fr 2fr;grid-template-rows: repeat(3, 100px); }上述代码创建了一个具有三列和三行的网格，其中第一列宽度为100px，第二列占据剩余空间的1/3，第三列占据剩余空间的2/3；所有行的高度均为100px。
-
repeat()函数
- 用于简化重复的网格轨道定义。
- 语法：
repeat(次数, 值)
示例：
.grid-container {grid-template-columns: repeat(3, 1fr); }上述代码表示创建三列，每列的宽度相等，均占据剩余空间的1/3。
-
auto-fill/auto-fit关键字
- 与repeat()函数结合使用，根据容器大小自动填充网格轨道。
- auto-fill：尽可能多地填充网格轨道，直到无法再添加更多轨道为止。
- auto-fit：与auto-fill类似，但会尝试调整轨道大小以适应容器。
-
minmax()函数
- 定义一个长度范围作为网格轨道的最小和最大尺寸。
- 语法：
minmax(最小值, 最大值)
示例：
.grid-container {grid-template-columns: 1fr minmax(100px, 1fr) 2fr; }上述代码表示第一列和第三列的宽度分别为1fr和2fr，第二列的宽度不小于100px且不大于1fr。
-
grid-gap/gap
- 设置网格行和列之间的间距。
- gap是grid-gap的简写形式。
- 可以接受两个值：第一个值表示行间距，第二个值表示列间距（如果仅提供一个值，则行间距和列间距相同）。
示例：
.grid-container {gap: 10px 20px; }上述代码表示行间距为10px，列间距为20px。
-
grid-template-areas
- 通过命名网格区域来布局网格项目。
- 需要在子元素上使用grid-area属性指定其所属区域。
示例：
.grid-container {display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-template-areas:'a a a''b c d''e e f'; } .item1 { grid-area: a; } .item2 { grid-area: b; } /* 以此类推 */ -
grid-auto-flow
- 设置容器子元素的放置在网格中的顺序。
- 可选值：row（默认，按行填充）、column（按列填充）、row dense（尽可能紧密地按行填充，避免空白）、column dense（尽可能紧密地按列填充，避免空白）。
-
justify-items/align-items
- 设置网格项目在单元格内的水平和垂直对齐方式。
- 可选值：start、end、center、stretch（默认，拉伸以占满单元格）。
-
justify-content/align-content
- 设置网格项目在容器内的水平和垂直对齐方式（针对整行或整列）。
- 可选值与justify-items/align-items相同。
二、项目属性
-
grid-column-start/grid-column-end
- 定义元素在网格中的起始和结束列位置。
- 可以使用网格线的编号或名称。
-
grid-row-start/grid-row-end
- 定义元素在网格中的起始和结束行位置。
- 使用方式与grid-column-start/grid-column-end相同。
-
grid-column/grid-row
- grid-column-start和grid-column-end或grid-row-start和grid-row-end的简写。
- 用于指定网格项目的位置和跨度。
-
grid-area
- 一种简写属性，用于同时设置元素的grid-row-start、grid-column-start、grid-row-end及grid-column-end。
- 也可以使用网格区域的名称来指定位置。
-
justify-self/align-self
- 设置单个网格项目在其单元格内的水平和垂直对齐方式。
- 可以覆盖容器的justify-items和align-items属性。
-
place-self
- justify-self和align-self的合并简写形式。
Grid布局以其强大的二维布局能力和灵活性成为现代网页设计中不可或缺的一部分。通过合理使用这些属性和方法，开发者可以创建出各种复杂且响应式的网页布局。
Grid布局，即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列，擅长将一个页面划分为几个主要区域，并定义这些区域的大小、位置、层次等关系。以下是一些常见的Grid布局形式，同时也是面试中常考的内容：
一、基础网格布局
这是Grid布局最基本的形式，通过定义grid-template-columns和grid-template-rows属性来设置网格的行和列。例如：
.container {display: grid;grid-template-columns: 100px 1fr 100px;grid-template-rows: 50px auto 50px;
}
在这个例子中，容器被划分为三列和三行，其中第一列和第三列的宽度为100px，第二列的宽度自适应；第一行和第三行的高度为50px，第二行的高度自适应。
二、命名网格区域布局
使用grid-template-areas属性可以为网格定义命名区域，这样可以通过名称而不是行和列的数字来放置Grid项。例如：
.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas:'header header header''main aside aside''footer footer footer';
}.header {grid-area: header;
}.main {grid-area: main;
}.aside {grid-area: aside;
}.footer {grid-area: footer;
}
在这个例子中，容器被划分为9个单元格，并通过grid-template-areas属性命名为header、main、aside和footer四个区域。然后，通过grid-area属性将具体的元素放置到这些命名区域中。
三、隐式网格布局
隐式网格是没有使用属性定义的，通过使用自动布局创建出来的网格。当容器中的项目数量超过显式定义的网格区域时，浏览器会自动创建隐式网格来容纳这些项目。例如：
.container {display: grid;grid-template-columns: 100px 1fr;grid-auto-rows: 50px; /* 定义隐式网格的行高 */
}.item {/* 项目样式 */
}
在这个例子中，只显式定义了两列，但如果有更多的项目，浏览器会自动创建隐式网格行来容纳这些项目，每行的高度为50px。
四、使用fr单位进行比例布局
fr单位允许将轨道大小设置为网格容器自由空间的一部分。例如：
.container {display: grid;grid-template-columns: 1fr 2fr 1fr;
}
在这个例子中，容器被划分为三列，每列的宽度占容器总宽度的1/4、1/2和1/4。
五、使用span关键字进行跨行/跨列布局
使用span关键字可以设置特定元素将跨越的列数或行数。例如：
.item1 {grid-column: span 2; /* 跨越两列 */
}.item2 {grid-row: span 2; /* 跨越两行 */
}
在这个例子中，item1将跨越两列，而item2将跨越两行。
六、使用justify-items、align-items、justify-content和align-content进行对齐布局
这些属性用于控制网格项在网格容器中的对齐方式。例如：
.container {display: grid;grid-template-columns: 100px 100px;grid-template-rows: 100px 100px;justify-items: center; /* 水平方向居中对齐 */align-items: center; /* 垂直方向居中对齐 */justify-content: space-between; /* 水平方向两端对齐，中间间隔均匀 */align-content: space-around; /* 垂直方向间隔均匀分布 */
}
在这个例子中，网格项在水平和垂直方向上都居中对齐，同时容器内的网格项在水平和垂直方向上的间隔也进行了相应的设置。
综上所述，Grid布局提供了多种布局形式，能够满足复杂的网页布局需求。在面试中，了解并掌握这些常见的Grid布局形式是非常重要的。
