什么是 CSS Grid 布局？
CSS Grid 布局是一种新的布局方式，它可以轻松地制作栅格系统。Grid 布局提供了一种“网格”（grid）的概念，通过将页面分割成若干行和列，自由地布置元素，从而实现更灵活的布局。
与传统的布局方式相比，CSS Grid 布局提供了更直观、更强大的操作方式，可以轻松实现复杂的布局效果。
如何使用 CSS Grid 布局？
定义网格
使用 CSS Grid 布局，首先需要定义一个网格（grid）。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}通过定义 display: grid，将容器转换成网格布局。
通过 grid-template-columns 和 grid-template-rows 属性，定义网格的列和行。其中 repeat 将重复指定数量的值。
通过 grid-gap 属性，设置网格之间的间距。
定位网格元素
使用 CSS Grid 布局，可以通过 grid-column 和 grid-row 属性定位网格元素。
.item {
grid-column: 1 / 3;
grid-row: 2 / span 2;
}grid-column 属性定义了元素在哪一列开始和结束，可以使用数字或关键字 start 和 end，并通过 / 分隔。
grid-row 属性定义了元素在哪一行开始和结束，可以使用数字或关键字 start 和 end，并通过 / 分隔。span 可以指定元素跨越多行或多列。
更多操作
除了上述操作之外，CSS Grid 布局还提供了更多的操作方式，如使用 grid-template-areas 定义区域，使用 grid-auto-rows 和 grid-auto-columns 定义自动计算行和列的大小等等。
示例
-- -------------------- ---- ------- ---- ------------------ ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ------- --------- ----- - ----- - ----------------- ----- - ------ - ------------ - - -- --------- -- - ------ - ------------ -- --------- - - -- - ------ - ------------ -- --------- - - ---- -- - ------ - ------------ -- --------- -- - ------ - ------------ -- --------- -- - ------ - ------------ - - ---- -- --------- -- - ------ - ------------ -- --------- -- - ------ - ------------ -- --------- -- - ------ - ------------ -- --------- - - ---- -- -
效果如下图：
总结
CSS Grid 布局是一种新的布局方式，可以轻松地实现栅格系统。通过定义网格和定位网格元素，可以实现各种复杂的布局效果，是前端开发人员必备的技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb8aa35ad90b6d042104fe