在现代Web开发中，CSS布局是不可或缺的一部分。随着响应式设计的普及，传统的浮动布局已经显得力不从心。这时，CSS Grid布局应运而生，它提供了强大的二维布局能力，让开发者可以轻松实现复杂的页面布局。今天，我们就以一张“CSS Grid Ultimate Cheatsheet”为蓝本，深入剖析Grid布局中的核心属性，帮助大家快速掌握Grid布局的精髓。
CSS Grid布局简介
CSS Grid布局是一种基于网格的二维布局系统。它将页面划分成一个个网格单元，开发者可以通过控制网格单元的大小和位置，来灵活地布局页面元素。与传统的浮动布局相比，Grid布局更加强大、灵活，并且易于使用。
容器 (父元素) 属性
首先，我们来看一下容器（父元素）的属性，这些属性用于定义网格的结构和布局方式。
- display: 该属性用于将一个元素定义为网格容器。
- display: grid;: 创建一个块级网格容器，与普通块级元素类似，会在其前后换行。
- display: inline-grid;: 创建一个行内网格容器，类似行内元素，不会在其前后换行。
- grid-template: 该属性用于定义网格的行和列。
- grid-template-columns: 定义列的宽度。例如，grid-template-columns: 14px 14px 14px; 创建三个宽度为14px的列，使用repeat(3, 14px)可以获得相同的结果。
- grid-template-rows: 定义行的高度。例如，grid-template-rows: 14px 14px 14px; 创建三个高度为14px的行。repeat() 函数也可以用于重复定义行的高度。
- 可以使用fr单位来创建弹性列或行，例如，grid-template-columns: 5px auto 5px; 创建一个固定宽度的列，中间列将占用剩余的所有空间。
- 也可以使用百分比来定义列或行，例如，grid-template-columns: 10% 10% auto; 创建一个由百分比和 auto 组成的列。
- grid-gap: 该属性用于定义网格单元之间的间距。
- grid-gap: 14px;: 设置所有行和列之间的间距均为14px。
- grid-row-gap: 14px;: 设置行之间的间距为14px。
- grid-column-gap: 14px;: 设置列之间的间距为14px。
- gap: gap属性与grid-gap类似，并且也适用于flexbox布局。
- justify-content: 该属性用于在行轴上对齐网格内容。当网格总宽度小于容器宽度时使用。
- justify-content: start;: 内容对齐到容器的起始位置。
- justify-content: end;: 内容对齐到容器的结束位置。
- justify-content: center;: 内容对齐到容器的中心位置。
- justify-content: stretch;: 内容拉伸以填充容器的宽度。
- justify-content: space-around;: 内容均匀分布，每个项目周围有相等的空间。
- justify-content: space-evenly;: 内容均匀分布，项目之间的空间和项目与容器边缘的空间相等。
- justify-content: space-between;: 内容均匀分布，项目之间的空间相等，但项目与容器边缘没有空间。
- align-content: 该属性用于在列轴上对齐网格内容。当网格总高度小于容器高度时使用。
- align-content: start;: 内容对齐到容器的起始位置。
- align-content: end;: 内容对齐到容器的结束位置。
- align-content: center;: 内容对齐到容器的中心位置。
- align-content: stretch;: 内容拉伸以填充容器的高度。
- align-content: space-around;: 内容均匀分布，每个项目周围有相等的空间。
- align-content: space-evenly;: 内容均匀分布，项目之间的空间和项目与容器边缘的空间相等。
- align-content: space-between;: 内容均匀分布，项目之间的空间相等，但项目与容器边缘没有空间。
- grid-auto-flow: 该属性用于控制自动放置网格项的方式。
- grid-auto-flow: row;: 自动放置网格项，从左到右依次排列，当一行填满时，自动换行到下一行。
- grid-auto-flow: column;: 自动放置网格项，从上到下依次排列，当一列填满时，自动换列。
- grid-auto-flow: dense; 或 grid-auto-flow: column dense; 当网格项大小不一致时，尝试填充网格中的空白空间，可能会导致网格项不按顺序排列。
- justify-items: 该属性用于在行轴上对齐网格项内的内容。
- justify-items: start; : 将内容对齐到单元格的起始位置。
- justify-items: end; : 将内容对齐到单元格的结束位置。
- justify-items: center; : 将内容对齐到单元格的中心位置。
- justify-items: stretch; : 拉伸内容以填充单元格的宽度。
- align-items: 该属性用于在列轴上对齐网格项内的内容。
- align-items: start; : 将内容对齐到单元格的起始位置。
- align-items: end; : 将内容对齐到单元格的结束位置。
- align-items: center; : 将内容对齐到单元格的中心位置。
- align-items: stretch; : 拉伸内容以填充单元格的高度。
子元素 (网格项) 属性
接下来，我们来看一下子元素（网格项）的属性，这些属性用于控制网格项在网格中的位置和大小。
- grid-row: 该属性用于定义网格项的行位置。
- grid-row-start: 定义网格项的起始行。grid-row-start: 1;: 网格项从第一行开始。grid-row-start: span 3;: 网格项从第一行开始，跨越3行。
- grid-row-end: 定义网格项的结束行。grid-row-end: 3;: 网格项在第三行结束。grid-row-start: 2; grid-row-end: 4;：网格项从第二行开始，在第四行结束。
- grid-row: 1 / 3: 等效于 grid-row-start: 1; grid-row-end: 3;
- grid-row: 1 / span 3: 等效于 grid-row-start: 1; grid-row-end: span 3;
- grid-column: 该属性用于定义网格项的列位置。
- grid-column-start: 定义网格项的起始列。
- grid-column-start: 1; : 网格项从第一列开始。
- grid-column-start: span 3; : 网格项从第一列开始，跨越3列。
- grid-column-end: 定义网格项的结束列。
- grid-column-end: 3; : 网格项在第三列结束。
- grid-column-start: 2; grid-column-end: 4;: 网格项从第二列开始，在第四列结束。
- grid-column: 2 / 4: 等效于grid-column-start: 2; grid-column-end: 4;
- grid-column: 2 / span 2: 等效于grid-column-start: 2; grid-column-end: span 2;
- grid-row + grid-column: 可以同时使用 grid-row和 grid-column 属性来定义网格项的起始位置和跨越的行数和列数。
- 例如，grid-row: 1 / span 2; grid-column: 1 / span 2; 定义网格项从第一行和第一列开始，跨越两行和两列。
- justify-self: 该属性用于在行轴上对齐单个网格项的内容。
- justify-self: start;: 内容对齐到单元格的起始位置。
- justify-self: end;: 内容对齐到单元格的结束位置。
- justify-self: center;: 内容对齐到单元格的中心位置。
- justify-self: stretch;: 内容拉伸以填充单元格的宽度。
- align-self: 该属性用于在列轴上对齐单个网格项的内容。
- align-self: start;: 内容对齐到单元格的起始位置。
- align-self: end;: 内容对齐到单元格的结束位置。
- align-self: center;: 内容对齐到单元格的中心位置。
- align-self: stretch;: 内容拉伸以填充单元格的高度。
总结
CSS Grid布局是一个功能强大的布局系统，可以帮助我们轻松实现各种复杂的页面布局。本文以速查表为基础，详细讲解了Grid布局中的核心属性。希望通过本文的学习，能帮助大家快速掌握Grid布局的原理和使用方法。
在实际的项目开发中，你是否也遇到过Grid布局相关的问题呢？欢迎在评论区分享你的经验和技巧，让我们一起进步！