Grid布局的历史

Grid布局的发展历史可以追溯到早期的网页布局方式。在过去，开发人员通常使用表格布局来创建网页的网格结构，但这种方式的缺点是不够灵活，难以实现自适应布局。

随着CSS的发展，出现了更多的布局方式，如浮动、定位和弹性布局等。然而，这些布局方式都存在一些限制和复杂性，无法满足一些复杂的布局需求。

在2011年，CSS Working Group（CSS工作组）开始研究并推动Grid布局的标准化。经过多年的开发和讨论，Grid布局规范于2017年成为CSS的一部分，得到了主流浏览器的支持。

Grid布局的标准化为开发人员提供了一种强大而灵活的布局方式，可以轻松地创建复杂的网格结构，实现各种页面布局需求。它使得页面布局更加直观和可控，也减少了对传统布局方式的依赖。

随着Grid布局的普及和应用，开发人员在实践中积累了丰富的经验和技巧，并创造了一些最佳实践和设计模式，以帮助更好地使用和理解Grid布局。

Grid原理解析

Grid布局的原理是通过将页面划分为行和列的网格结构，并在网格中放置元素来实现布局。以下是Grid布局的原理解析：

网格容器：使用Grid布局的元素被指定为网格容器。通过将其设置为display: grid或display: inline-grid来启用Grid布局。
网格轨道：网格容器中的行和列被称为网格轨道。可以通过grid-template-rows和grid-template-columns属性来定义网格的行和列的大小和数量。
网格单元格：由网格轨道交叉形成的矩形区域被称为网格单元格。网格单元格是放置网格项的基本单位。
网格项：网格容器中的子元素被称为网格项。可以通过设置网格项的grid-row-start、grid-row-end、grid-column-start和grid-column-end属性来指定网格项在网格中的位置。
网格模板：通过grid-template-rows、grid-template-columns和grid-template-areas属性来定义网格的结构和区域。网格模板可以指定固定大小的行和列，也可以使用fr单位来指定比例关系。
网格区域：通过grid-template-areas属性可以定义网格区域，将多个网格单元格组合成一个区域。可以在网格项的grid-area属性中引用网格区域的名称。
网格线命名：可以为网格线指定名称，以便在网格项的grid-row-start、grid-row-end、grid-column-start和grid-column-end属性中引用。这样可以更方便地控制网格项的位置。
网格间距：可以通过grid-gap属性来设置网格单元格之间的间隔，包括行间距和列间距。

通过设置网格容器的属性和网格项的位置属性，可以实现灵活的布局。可以通过调整网格轨道的大小、改变网格项的位置和跨越多个网格单元格来实现不同的布局效果。同时，还可以通过网格模板和网格区域来更加精确地控制布局的结构和样式。

将Grid布局和Flex布局进行对比

Grid布局和Flex布局是两种常用的CSS布局方式，它们有一些相似之处，但也有一些明显的区别。

布局方向：
- Grid布局：可以同时定义行和列的布局，创建二维网格结构。
- Flex布局：主要用于单一方向上的布局，即水平或垂直方向。
网格结构：
- Grid布局：可以创建复杂的网格结构，包括多行多列、不规则网格等。
- Flex布局：主要用于简单的一维布局，通常用于创建灵活的行或列。
元素排序：
- Grid布局：可以通过设置网格项的位置属性来改变元素的顺序。
- Flex布局：可以通过order属性来改变元素的顺序。
自适应性：
- Grid布局：可以通过auto-fill和auto-fit等属性实现自适应布局，自动调整网格大小和元素位置。
- Flex布局：可以通过flex-grow、flex-shrink和flex-basis等属性实现自适应布局，自动调整元素的大小和位置。
对齐方式：
- Grid布局：可以通过justify-content和align-items等属性在行和列方向上对齐元素。
- Flex布局：可以通过justify-content和align-items等属性在主轴和交叉轴上对齐元素。
嵌套布局：
- Grid布局：可以嵌套使用，创建更复杂的布局结构。
- Flex布局：也可以嵌套使用，但主要用于简单的一维布局。

用Grid和flex布局实现同一个小案例

下面是一个使用Grid布局和Flex布局实现同一个案例代码：

使用Grid布局实现：

HTML代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

使用Flex布局实现：

HTML代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  background-color: #ccc;
  padding: 10px;
  margin-right: 10px;
}

.item:last-child {
  margin-right: 0;
}

以上代码中，使用Grid布局的案例中，通过display: grid将容器设为网格布局，通过grid-template-columns设置网格的列数和宽度，通过grid-gap设置网格项之间的间距。

使用Flex布局的案例中，通过display: flex将容器设为弹性布局，通过justify-content: space-between将网格项平均分布在容器中，并通过flex: 1设置网格项的宽度自动填充。

这两个案例实现了类似的效果，但是使用了不同的布局方式。具体选择哪种布局方式取决于具体的需求和设计目标。

CSS3之Grid布局 ｜ 青训营

Grid布局的历史

Grid原理解析

将Grid布局和Flex布局进行对比

用Grid和flex布局实现同一个小案例

CSS3之Grid布局｜青训营