CSS Grid布局详解：从入门到实战
CSS Grid布局详解：从入门到实战
CSS Grid布局是CSS语言中非常强大的布局方式，它提供了丰富的工具属性，可以轻松实现复杂且灵活的布局设计。本文将从兼容性、基本概念、使用方法、具体属性以及实际应用案例等多个方面，帮助读者全面了解和掌握CSS Grid布局。
兼容性
CSS Grid是使用CSS构建布局的一种前沿方式，实际上也并不完全是“前沿”的，自2017年以来，所有主流浏览器都支持它！据caniuse称，97.8%的用户支持CSS Grid，这是算是非常出色的浏览器兼容率，Flexbox（弹性盒子）的兼容率仅高出约0.5%！
简介
CSS是由几种不同的布局算法组成，每种算法都针对不同类型的用户界面而设计。默认布局算法Flow布局专为数字文档而设计，Table表格布局专为表格数据而设计，Flexbox专为沿单个轴分布布局而设计。
而CSS Grid算是一种最新、最出色的布局算法，它非常强大，可以使用它来构建复杂的布局，并且可以根据许多复杂约束条件流畅地进行布局调整，在我看来CSS Grid最不寻常的部分是网格结构、行和列完全在CSS中定义：
使用grid布局之后，单个DOM节点被细分为行和列，上图用虚线突出显示行/列，但实际上，它们是不可见的，为了方便展示我加了border属性，在其他所有布局模式中，创建此类布局的唯一方法是添加更多DOM节点。例如，在表格布局中，每行都使用创建，该行中的每个单元格使用或创建：
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
与表格布局不同的是grid布局允许浏览器完全在CSS内部管理布局，能够随意分割容器，创建网格子元素可以用作锚点的隔间
.wrapper {
display: grid;
}
默认情况下，grid布局使用单列，并根据子元素的数量根据需要创建行，这称为隐式网格，因为没有明确定义任何布局结构，工作原理如下：
隐式网格是动态的；行数将根据子项的数量添加和删除，每个子项都有自己的行，默认情况下网格父元素的高度由其子元素决定，它会动态增加和减少，有意思的是这甚至不是grid的属性，网格父元素仍然使用流布局，流布局中的块元素会垂直增长以包含其内容！只有子元素使用网格布局排列。
但是如果我们给网格一个固定的高度会怎么样？在这种情况下，整体高度将被分成大小相等的行：
使用Grid布局
默认情况下，Grid将创建单列布局，可以使用grid-template-columns属性指定列：
为了清晰起见，所以这里添加了虚线
在上面的所有内容的示例中都使用了虚线来显示列和行之间的划分，在CSS网格中实际是没有这些虚线的。
通过给grid-template-columns设置两个属性值（25%和75%），意思是告诉CSS grid算法将元素分成两列。
可以使用任何有效的CSS
fr可以理解为'份数'在此示例中，表示第一列应占用1份的空间，而第二列应占用3份的空，这意味着整个元素总共被分为了4个份的空间把着看做分母，第一列占用了可用空间的¼，而第二列占用了¾。fr单位为CSS Grid布局带来了Flexbox布局的灵活性，百分比和
具体差异如下：
在这种情况下，左边第一列有一个固定宽度的图片，其宽度被明确指定为55px。但是如果列太小而无法容纳它怎么办？
基于百分比的列是固定的，因此会出现图像溢出。
基于fr的列是灵活的，就算破坏了预先规定的宽度比例也不会缩小到图片内容大小以下，
更准确地说：fr单位分配额外的空间。首先列宽将根据其内容计算，如果有剩余空间，它将根据fr值进行分配，这与flex-grow非常相似，这种灵活性在实际使用场景中是一种更好更方便的选择。
我们可以通过gap看到一个完美的例子。gap是一个神奇的CSS属性，它在我们的网格中的所有列和行之间添加了固定量的空间。
看看在百分比和fr之间切换时会发生什么：
注意使用基于百分比的列时内容会溢出网格的父级，发生这种情况是因为百分比是使用总网格面积计算的，两列占用了父级内容区域的100%，并且不允许缩小，当添加16px的间隙时列别无选择只能溢出容器。
相比之下，fr单位是根据额外空间计算的。在这种情况下，额外空间已减少了16px间隙，grid算法将剩余空间分配到两个网格列之间。
gapVS grid-gap
grid首次推出时，grid-gap属性用于在列和行之间添加空间。然而大家很快意识到，如果Flexbox也拥有此功能那效果将会更好，因此该属性被赋予了一个更通用的名称gap。
如今，grid-gap已被标记为弃用，浏览器已将其更改为gap，这两个属性的作用完全相同，而且它们浏览器兼容率都为96%，因此无论使用的是Flexbox还是CSS Grid，我都建议使用gap而不是grid-gap！
隐式和显式行
如果在两列网格中添加两个以上的子元素，会发生什么情况？
上面网格增加了第二行，网格算法确保每个子元素都有自己的网格单元，它会根据需要生成新行来实现此目标，这在元素数量可变（例如照片网格）并且希望网格自动扩展的情况下非常方便，
但是，在其他情况下希望明确定义行，以创建特定的布局，就可以使用grid-template-rows属性来实现这一点：
通过定义grid-template-rows和grid-template-columns，可以创建一个显式网格。
实用案例
使用grid布局构建一个日历：
CSS Grid是处理此类问题的绝佳工具。我们可以将其构造为7列网格，每列占用1个单位：
.calendar {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
虽然上述方案也可行，但必须计算每个1fr，这有点烦人。想象一下，如果我们有50列该怎么办？有一种更好的方法可以解决这个问题：
<style>
.calendar {
display: grid;
grid-template-columns:
repeat(7, 1fr);
gap: 4px;
}
</style>
<ol class="calendar">
<li class="day">1</li>
<li class="day">2</li>
<li class="day">3</li>
<li class="day">4</li>
<li class="day">5</li>
<li class="day">6</li>
<li class="day">7</li>
<li class="day">8</li>
<li class="day">9</li>
<li class="day">10</li>
<li class="day">11</li>
<li class="day">12</li>
<li class="day">13</li>
<li class="day">14</li>
<li class="day">15</li>
<li class="day">16</li>
<li class="day">17</li>
<li class="day">18</li>
<li class="day">19</li>
<li class="day">20</li>
<li class="day">21</li>
<li class="day">22</li>
<li class="day">23</li>
<li class="day">24</li>
<li class="day">25</li>
<li class="day">26</li>
<li class="day">27</li>
<li class="day">28</li>
<li class="day">29</li>
<li class="day">30</li>
<li class="day">31</li>
</ol>
此日历是如何使用CSS Grid创建特定布局的简单示例，它并不适用于生产环境。
分配子元素
默认情况下，grid算法会将每个子元素分配到第一个未占用的网格单元，可以将子元素分配到想要的任何单元！子元素甚至可以跨越多行/列：
grid-row和grid-column属性允许指定网格子元素应占据哪些位置，如果希望子元素占据一行或一列，可以通过其编号指定，grid-column: 3将设置子项位于第三列。
网格子项还可以跨越多行/列，此语法使用斜线来划分开始和结束：
.child {
grid-column: 1 / 4;
}
乍一看，这看起来像一个分数¼。但在CSS中，斜线字符不用于除法，而是用于分隔值组。在本例中，它允许我们在单个声明中设置起始列和结束列，它本质上是以下代码的简写：
.child {
grid-column-start: 1;
grid-column-end: 4;
}
这里有一个小小的陷阱：提供的数字是基于列数量，而不是列索引，为了方便理解，这里用一张图来解释这个更容易：
让人不解的是，虽然说是4列的网格布局，但实际上包含了5条分隔列的线。在分配子元素到网格中时，会依据这些线来确定它们的位置，如果想让一个子元素占据前3列的空间，那么它的起始位置应是第1条列线，而结束位置则需延伸到第4条列线之后。
负数行号
在左到右的语言中，习惯从左到右计数列，但是使用负数行号，实际上也可以按相反方向计数，即从右到左。
.child {
grid-column: -2;
}
更有意思的是实际上你可以正数负数一起使用！！！
即使没有特别指定子元素应占据的列数，它有时也会自动跨越整个网格的宽度，这确实是一个值得注意的现象。在这种情况下，如果想要子元素从第一列线开始，并一直延伸到最后一列线，可以采用一种简便的声明方式来实现Full-Bleed布局
网格区域
如何使用grid布局实现如下页面结构呢？
.grid {
display: grid;
grid-template-columns: 2fr 5fr;
grid-template-rows: 50px 1fr;
}
.sidebar {
grid-column: 1;
grid-row: 1 / 3;
}
.header {
grid-column: 2;
grid-row: 1;
}
.main {
grid-column: 2;
grid-row: 2;
}
和之前一样，使用grid-template-columns和grid-template-rows定义网格结构。但是这里有个奇怪的声明：
.parent {
grid-template-areas:
'sidebar header'
'sidebar main';
}
它的工作原理确实非常直观还很有创意，通过一种类似于制作ASCII艺术的方式来规划网格布局。每一行代表网格中的一行，而每个“单词”或标识符则是为网格中特定区域所指定的名称。这样，整个布局在视觉上就能清晰地呈现出网格的结构。
在分配子元素到网格时，采用grid-area属性，而不是单独使用grid-column和grid-row。这种方式使得布局更加灵活和易于理解，因为可以通过区域名称来指定子元素的位置和大小，而无需关心具体的行列号。
当某个区域需要跨越多行或多列时，只需在网格模板中重复该区域的名称即可。例如，在示例中，“侧边栏”区域跨越了两行，因此在第一列中连续为两个单元格指定了“侧边栏”作为它们的名称。
至于应该使用区域还是行/列来构建布局，这主要取决于具体的需求和场景。在构建具有明确语义含义和显式布局的网格时，使用区域（如通过grid-template-areas和grid-area）通常是一个更好的选择。它不仅能够使布局更加清晰易懂，还能为网格的不同部分赋予有意义的名称，从而提高代码的可维护性和可读性。
然而，当网格的行数和列数可能发生变化，或者需要更灵活地控制子元素的具体位置时，使用grid-column和grid-row等属性可能更为合适。这些属性允许直接指定子元素应该占据哪些行和列，从而提供了更高的灵活性和控制力。
总的来说，无论是使用区域还是行/列来构建网格布局，关键在于根据具体需求和场景选择最合适的方法。
用户体验
在网格分配方面有一个很大的问题：选项卡顺序仍然基于DOM位置，而不是网格位置。当使用CSS Grid布局时，一个容易被忽视但非常重要的问题，特别是关于Tab键的导航顺序。在CSS Grid中，虽然可以自由地排列元素以实现视觉上的布局效果，但Tab键的导航顺序仍然是基于DOM中的元素顺序，而不是它们在网格中的视觉位置。
假设有一个包含多个按钮的网页，使用CSS Grid来布局这些按钮，使它们在视觉上呈现出一种特定的排列方式。然而，当使用键盘上的Tab键来导航这些按钮时，会发现它们并不是按照在网格中看到的顺序来被选中的。相反，它们会按照它们在HTML文档（即DOM）中出现的顺序被依次选中
为了解决这个问题，应该重新排列DOM中的网格子元素，使它们与视觉顺序相匹配，这样我就可以从左到右、从上到下进行切换。
CSS开发人员也意识到这是网格布局的一个缺陷。必须将DOM顺序与视觉顺序相匹配，这有点违背了将子元素分配给特定网格单元的目的！
据说是正在修复中。将来阅读顺序CSS属性应该允许指示浏览器忽略DOM顺序，并按照元素在屏幕上出现的顺序聚焦元素。截至2024年9月，任何浏览器都尚未实现此属性