了解如何使用CSS网格构建二维网站

使用CSS Grid,您可以以通常的一半时间创建二维网站布局。

CSS Grid是浮动布局系统的继承者,尽管在某些情况下使用浮动布局结构可能比使用CSS Grid更为实用,但是一些开发人员倾向于仅使用CSS Grid来构建其网站。

这并不奇怪,因为CSS Grid是您军械库中的强大工具。本指南将教您如何在所有Web开发项目中使用CSS Grid。

CSS网格系统如何工作

CSS Grid(或仅仅是Grid)本质上是一个二维网站布局系统,用于构建网页上的元素。 CSS网格布局系统基于父子概念,在该概念中,您将有一个主容器(父容器)和该容器内的几个不同的网格项(子容器)。

要在任何网站上使用CSS Grid,您首先需要初始化Grid容器。这是通过将预期的父元素的显示属性设置为grid的值来完成的。

CSS网格容器示例


selector{
display: grid;
}

选择器可以是HTML元素,类或ID。重要的是它可以直接标识HTML元素,该HTML元素将网页上的所有其他HTML元素包围起来。

在网格布局结构中,容器内的所有元素都称为grid-items 。默认情况下,CSS网格布局是垂直的(这也是HTML中的默认布局结构),因此,使用上方的display属性初始化CSS网格时,网格项目的布局将保持不变(垂直)。

要重新排列网页上的网格项,您将需要使用grid-template-columns属性, grid-template-rows属性或两者的组合。

这就是为什么CSS Grid被识别为二​​维布局系统的原因。它允许您同时水平(行)和垂直(列)构造网格项。

使用Grid-template-columns属性

grid-template-columns属性应该始终在display属性旁边的container元素内使用。使用grid-template-columns属性,您可以通过几种方式之一在CSS Grid布局中指定所需的列数。

构造网格项的一种方法是使用像素(px)。

使用像素构造网格项目示例


.gridContainer{
display: grid;
grid-template-columns: 400px 400px 400px;
}

在上面的示例中,需要注意两件事。首先是使用上面的代码将在您的网页上创建三列,每列的宽度为400px。如果容器中的网格项少于三个,则屏幕上将只显示一或两列。

但是,如果容器中的网格项数超过三个,则每组三个网格项将被放置在新的一行上,直到完成为止。

要注意的第二件事是,使用px值来构造网格项并不是一种非常实用的方法。这主要是因为像素单元不支持响应式设计

回到上面的例子;如果我们的容器中有六个网格项,则在平板电脑上不会立即看到左侧的两个网格项。

使用px(或任何其他固定值)布局网格项的建议替代方法是使用分数(fr单位)。

使用分数值示例


.gridContainer{
display: grid;
grid-template-columns: 1fr 2fr;
}

上面的代码将在预期的网页上生成两列。右侧的列将是左侧的列的两倍。推荐使用fr的主要原因是因为fr支持响应性。

因此,无论设备上的屏幕尺寸是多少,右侧的列始终是左侧的两倍。

在网页上有一个旁白部分的情况下,这种布局很流行。较小的列将保留给aside节,其中将包含与主流无关但不是其一部分的内容(例如目录)。

使用Grid-template-rows属性

使用grid-template-rows属性的标准与grid-template-columns属性的标准有些相同。

一个明显的区别是,在grid-template-rows属性创建行的地方, grid-template-columns属性创建列的地方。但是,两个属性之间还有其他更细微的区别(例如隐式行和整体行结构)。

行结构

回到上面的使用分数值的示例,如果该代码用于两个以上的元素,则额外的元素将环绕以两列创建额外的行,直到所有元素都在网格中为止。

grid-template-rows属性不是这种情况。考虑以下示例。

网格模板行示例


.gridContainer{
display: grid;
grid-template-rows: 1fr 3fr;
}

如果使上面的CSS代码针对包含五个<div>标记的HTML文档,每个标记都是gridContainer类元素的直接子代,则第一个元素将保持其默认高度,第二个元素的高度将为是第一个的三倍。

当您到达第三个div元素时,问题变得很明显。您会发现,这些行将不间断地继续围绕并创建第二列,而将在屏幕上连续不断地前进。这些行被称为隐式行,因为它们将不受上面的代码的影响,并继续保留其默认高度。

可以使用grid-auto-rows属性将这些隐式行作为目标。

使用Grid-auto-rows属性

grid-auto-rows属性通常用于为不在网格grid-template-rows属性范围内的网格中的行分配高度。

网格自动行示例


.gridContainer{
display: grid;
grid-template-rows: 1fr 3fr;
grid-auto-rows: 3fr;
}

如果上面的CSS代码用于定位直接包含五个网格项的容器,则上面的grid-template-rows属性将应用于前两个网格项,而grid-auto-row属性将应用于其他三个网格项元素-有效解决隐式行问题。

尽管可以在需要时分别使用grid-template-rowgrid-template-columns ,但是建议在需要二维布局(行和列)时使用CSS Grid。如果仅需要一维布局(行或列),则浮动布局结构将是更好的选择。

构建网站布局从未如此简单

使用CSS Grid,您可以创建基于父子概念的二维网站。为使之成为可能,您需要记住的事情包括:

  • 将网格值分配给容器元素中的display属性。
  • 在容器元素内使用grid-template-rowsgrid-template-columns
  • 当容器元素中的元素数量超过grid-template-rows属性的目标数量时,使用grid-auto-row属性。

最后的要点是确保您在二维布局结构上有效地使用CSS网格。当需要一维布局结构时,浮动布局结构可能被证明是更好的选择。