runsly html+css教程 2023-04-25

cssgrid布局是什么？grid布局的基本介绍

网格是布局设计的基础，而CSS Grid是一个二维布局系统，专门用于处理Web上基于网格的用户界面。通过Grid(网格) 布局可以解决页面上的很多布局问题。

CSS Grid布局的功能很强大，本篇文章我们就来简单介绍一下Grid布局，让大家了解Grid布局的一些基本概念和术语，希望对你们有所助。

Grid布局的作用：

在网络相对较短的生命周期中，开发人员一直在尝试各种方法来在浏览器中布置内容。我们一直是使用来css布局网页的，但都存在这样或那样的问题。先是使用基于表格的布局，然后是使用基于浮动的布局。但这些方法充其量只是解决方法，因为表和浮动都不是用作真正的布局工具。

Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块，我们终于不需要想尽办法来解决页面布局样式了。

CSS Grid引入了一系列属性，允许我们使用CSS创建网格结构并控制网格项的放置和大小调整。这意味着我们可以使用媒体查询来调整我们的网格布局来适应不同大小的显示屏。

Grid还带有强大的自动放置算法，可以更轻松地填充可用空间，而无需进行大量复杂的计算。在某种程度上，Grid甚至允许在z轴上具有一定的灵活性，因为如果需要，您可以重叠网格项。

css Grid的基本概念和术语

由于Grid的创建非常灵活，并为许多不同的用例提供解决方案，因此我们无法快速就能理解和使用它。下面我们先来看看Grid的一些基本概念和术语。

在网格规范中引入了术语和概念，因此我们想要充分利用网格，首先要了解并理解这些术语和概念。

网格线

网格线是形成网格结构基础的水平线和垂直线。它们用于在网格上定位项目。我们可以用数字索引来引用它们，从1开始。

网格线也有负指数，这允许我们从网格的末尾开始引用网格线。负索引的一个用例是，如果我们需要最后一列中的项目，而不考虑轨道的数量，那么为该项目提供一个值为-1的grid-column-end属性将会处理它。

.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
}

.item {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}

我们可以命名网格线，这样就不必计算需要引用的网格线。可以在网格模板列和网格模板行属性中将这些名称声明为可选参数。

.grid-container {
  display: grid;
  grid-template-columns: 150px [col-foo] 150px 150px [col-bar];
  grid-template-rows: 150px [row-foo] 150px [row-bar];
}

.item {
  grid-column-start: col-foo;
  grid-column-end: col-bar;
  grid-row-start: row-foo;
  grid-row-end: row-bar;
}

网格轨道和单元格

网格轨道是2个相邻网格线之间的空间，它们是网格的行和列。下图突出显示了第一行和第二行网格线之间的网格轨迹。我们可以使用grid-row-gap和grid-column-gap属性，利用行间隙和列间隙来把网格轨道分开。

网格单元是2个相邻行网格线和2个相邻列网格线之间的空间。它在概念上类似于表格单元格，因为它是网格的单个单元。下图突出显示了第三和第四列网格线以及第二和第三行网格线之间的网格单元。

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
}

网格区域

网格区域由1个或多个网格单元组成，并由网格区域的每一侧上的4个网格线约束。您可以使用其grid-template-areas属性定义的边界网格线或其名称来引用网格区域。然后可以将网格项目分配给具有网格布局属性的网格区域，例如：grid-area，grid-row，grid-column属性或它们的长格式的等价物。

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
  grid-template-areas: "a b b"
                       "a b b";
}

.item-1 {
  grid-area: a;
}

.item-2 {
  grid-area: b;
}

如前所述，图表的阴影部分是网格轨道之间的沟槽，可以使用grid-row-gap和grid-column-gap属性控制。

所以，把它们放在一起：