什么是 CSS Grid?
CSS Grid 是一种新的布局方式，是一种通过将子元素放置在网格中来构建网格布局的 CSS 模块。Grid 布局能够以一种简单、直观的方式，提供强大的布局能力，可以快速且轻松地实现复杂的布局，包括多行、多列布局、媒体查询及自适应布局等。
Grid 布局语法基础
使用 Grid 布局，需要在容器上应用 grid 声明，并通过其属性来定义行和列的数量以及它们的宽度或高度。
一个 Grid 布局的基本结构是这样的：
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
以上代码定义了一个具有三列和三行的网格，每列和每行都等分空间。grid-template-columns 和 grid-template-rows 属性分别定义了列和行的数量，并决定每列和每行所占用的比例。
其中，fr（fraction）是指用相对单位表示的网格单元格的大小，表示等分网格容器的空间，1fr 表示平均分配网格容器的可用空间。可以通过这种方式来设置不同大小的网格。
.container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto auto; }
以上代码定义了一个具有三列和三行的网格，第一列占用容器可用空间的两倍。grid-template-rows 上使用了 auto，代表根据网格内容自适应行高。
Grid 布局的实用技巧
- 可以通过 grid-template-areas 属性来定义网格区域，以更直观、易于维护的方式来构建布局。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- ---- ---- ----- -------------------- ------- ------ ------- -------- ---- ----- ------- ------ -------- - ------- - ---------- ------- - -------- - ---------- -------- - ----- - ---------- ----- - ------- - ---------- ------- -展开代码
grid-template-areas 确定网格区域，然后使用 grid-area 来定义每个元素在网格中的位置，这样可以方便地添加、删除或修改布局。
- 使用 auto-fit 和 auto-fill 可以轻松创建自适应网格布局，自适应布局的实现是 CSS Grid 的一个主要优势。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ---------------- ------------ ------ - ----- - ----------- ----- ------- ----- -展开代码
通过 repeat、auto-fit 和 minmax 属性，可以快速创建一个自适应布局，其中 repeat 函数定义了一个重复网格，auto-fit 指定行数自动适应内容，minmax 每个单元格宽度的最小值为 50px，最大值为 1fr。
- 使用网格的内边距和外边距，可以轻松调整网格容器和网格单元格之间的距离。
.container { display: grid; grid-gap: 1rem; padding: 1rem; margin: 1rem; }
通过 grid-gap、padding 和 margin 属性，可以调整容器和单元格之间的间距、内边距和外边距。
示例代码
以下代码是一个简单的网格布局示例，以使用 CSS Grid 来实现页面布局：
<div class="container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="main">Main Content</div> <div class="footer">Footer</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- ---- ---- ----- -------------------- ------- ------ ------- -------- ---- ----- ------- ------ -------- --------- ----- -------- ----- ------- ----- - ------- - ---------- ------- ----------------- ----- ------ ----- ----------- ------- - -------- - ---------- -------- ----------------- ----- ------ ----- - ----- - ---------- ----- ----------------- ----- - ------- - ---------- ------- ----------------- ----- ------ ----- ----------- ------- -展开代码
总结
CSS Grid 提供了很多强大的功能，可以帮助我们快速、高效地构建布局。本文介绍了 Grid 布局的基本语法和实用技巧，希望能够帮助读者更好地掌握 Grid 布局的使用方法，实现更好的自适应布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64715f87968c7c53b0f3fdd3
