首页 >web前端 >css教程 >初学者的CSS网格布局指南

初学者的CSS网格布局指南

尊渡假赌尊渡假赌尊渡假赌原创: 2025-02-08 13:19:08579浏览

初学者的CSS网格布局指南

> CSS网格布局模块已彻底改变了网站的构建方式。它提供了工具，可以允许不棘手的黑客和过去的创造性解决方案进行高级布局。

>在本网格简介中，我们将介绍网格布局的工作原理，我们将查看许多在实践中使用它的简单示例。

钥匙要点

网格结构和项目位置：探索CSS网格的基本特征，包括使用网格结构使用网格结构，使用网格 - 板块柱，网格 - 板板行和网格 - 板置区域。本教程展示了带有间隙属性的间距项目，并将其整理成特定的行和列以精确的布局。
使用CSS网格的响应式设计：强调CSS网格对响应网络设计的适应性，展示了如何使用媒体查询来改变不同屏幕尺寸的网格布局。还讨论了高级技术，例如重叠的网格项目和创建响应式布局，而无需媒体查询，从而强调了CSS网格在现代网络设计中的多功能性。
>
开始使用网格布局

启动网格就像这样做一样简单：

>现在，包含元素的所有直接子女将是“网格项目”。首先，它们只会在单列中显示为一堆行，如下演示所示。

。

>请参见笔

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

css网格基础：显示：sitepoint（@sitepoint）

网格

在上面的示例中，我们有一个充当容器的

元素。在其中，我们有几个元素，现在是网格项目：

到目前为止，我们还没有取得太多成就，因为我们将在没有显示的情况下获得相同的结果：网格。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

进一步阅读：

在上面的演示中，容器以视口为中心。阅读更多有关用网格的核心元素的更多信息。

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

请参阅codepen上的sitepoint（@sitepoint）
gap bapen。

差距属性在不久将看到的那样，垂直和水平的元素之间插入元素之间的空间。（如果需要的话，我们可以设置不同的水平和垂直间隙。）

进一步阅读：

>阅读有关差距属性的更多信息。

设置网格列

>当前，我们有一个“隐式”网格 - 这意味着浏览器只是在弄清楚自己的网格，因为我们尚未指定任何行或列。默认情况下，我们只能获得一列和四行 - 每个网格项目一个。现在让我们指定一些列：

>带有网格 - 板块柱，我们指定的是，我们需要四列，每个列的宽度为1FR，或一小部分可用空间。（我们可以使用非常方便的重复（）函数来代替1FR 1FR 1FR 1FR 1FR 1FR。

现在，我们的网格项目已在一排中布置，如下所示。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

请参阅codepen上的codepen。

进一步阅读：

有关网格 - 板块柱的更多信息。

>了解有关柔性长度（FR）单元的更多信息。>

>如何使用网格的重复（）函数。

如果我们将该行添加到上面的笔中，那么还没有发生太多事情，因为我们尚未指定我们如何希望我们的网格项目适合这些行和列。（同样，请注意，自动自动自动可以使用重复（）函数写为重复（3，auto）。）

进一步阅读：

有关网格网板行的更多信息。

>如何使用网格的重复（）函数。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

将网格项目放在网格上

>我们浏览器的开发人员工具非常方便地了解CSS网格布局。如果我们到目前为止检查代码，我们可以看到定义网格的水平和垂直网格线，如下图所示。

>有五个垂直网格线和四个水平网格线，它们都编号了。我们可以使用这些网格线来指定我们希望如何布置网格项目。>

元素以跨越四列和一行：

>这告诉

从编号为1的网格列线开始，并在编号为5的列线上结束。由于未指定端线，它只是跨越下一行，因此网格行：1等于网格行：1 /2

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

让我们做类似于的事情：

这里唯一的区别是我们将设置为位于第3和第4行之间。

现在，让我们定位和元素：>

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

结果显示在下面的笔中。

>请参阅笔

css网格基础：通过sitepoint（@sitepoint）

在codepen上放置编号行的项目。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

>现在，我们有一个灵活且响应的布局，而没有黑客的浮标，溢出和过去的其他噩梦。如果我们将内容添加到网格项目中，它们将扩展以包含该内容，并且并排列将始终具有相等的高度。（对于那些在Noughties中与CSS合作的人，实现同等高度的专栏是一场噩梦！）

关于编号网格线的有用的知识

>如果您再次查看上图，您会发现，沿底部，垂直线也被负数命名。每个网格线都有一个正数和负数。这有很多用途，例如当有很多网格线路时，我们不一定知道会有多少。我们可以将我们的

元素设置为带有网格列的所有五列：1 / -1，因为最后一个垂直线被编号为5和-1。

网格还具有一个跨度关键字，我们可以用它来告诉元素跨越许多行或列。我们

布局的另一个选项是编写网格列：1 / span 4。这告诉元素从第一个网格线开始，并在我们的四个列中跨越跨度。

在上面的笔中尝试这些变化。

进一步阅读：

了解有关网格线的更多信息。
网格线编号的方向受我们的布局写作模式的影响。
>

>使用名为网格线

放置网格项目

>我们已经看到了如何使用编号的网格线在网格上组织元素。但是，我们还可以为我们的某些或全部网格线命名并引用这些线条 - 这可以更直观，并使我们免于计算网格线。

>让我们更新我们的布局以包括一些命名行：

在上面的代码中，我们仅命名了三条垂直网格线。这些名称在我们的列宽度旁边的方括号中移动，代表我们的列线。>

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

我们现在可以将我们的一些元素放在网格上，例如：

我们可以在下面的演示中看到此代码。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

>请参阅笔

css网格基础：通过sitepoint（@sitepoint）

在codepen上放置命名行的项目

进一步阅读：

>了解有关命名网格线的更多信息。

>在网格规范中阅读有关命名线的信息。

>使用网格 - 板截面，我们绘制了一个简单的文本网格，指定了我们希望如何布置元素。现在，我们只需要将这些区域名称应用于我们的元素：

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

因此，

将跨越所有四个列，元素将仅位于第二行的第一列中，依此类推。

我们可以在下面的笔中看到这一点。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

>请参见笔

css网格基础：使用sitepoint（@sitepoint）

在codepen上使用名称区域的项目。

这个代码比我们之前的代码要简单得多，无论是使用编号还是命名行。使用这样的命名网格区域几乎是令人尴尬的简单 - 例如使用Wysiwyg编辑器而不是编写真实的代码。但是请放心，这不是作弊！这只是超级酷。

使用线号并带有网格区域的命名行

>值得注意的是，我们还可以使用行号和/或命名线来定义网格区域。例如，我们可以做类似的事情，而不是使用网格 - 板截面属性：>

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

模式是row-start / column-start / row-end / column-end。您可以在Codepen

上查看此演示。就我个人而言，我发现很难记住这种行和列的模式，但是网格的伟大是有很多方法可以做同样的事情。>

更改网格项目的布局

在过去的几天中，如果我们决定在某个时候更改页面元素的布局，则可能会导致许多代码重构。例如，如果我们想将元素扩展到布局的末尾怎么办？对于网格区域，这非常容易。我们可以做到这一点：

>我们刚刚从页脚上删除了一个网格单元，并将其分配给了一边，从而导致了我们在下面的笔中看到的。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

>请参阅笔

CSS电网基础：使用sitepoint（@sitepoint）

在codepen上放置项目2

>我们甚至可以决定我们在某个地方想要一个空单元。我们仅使用一个或多个时期来做到这一点，例如：

查看您是否可以预测此结果，然后查看此Codepen演示。

进一步阅读：

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

了解有关网格板序列的更多信息。>

了解有关网格区域的更多信息。

我们现在只指定了一个列，并在该列中设置了元素的顺序。

>请参阅笔

css网格基础：在codepen上使用sitepoint（@sitepoint）

使用媒体查询。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

>按下底部的0.5倍按钮，以查看布局的响应方式（或在Codepen上查看笔，并扩大并缩小视口）。

更改网格项目的显示顺序

>我们现在处于一个很好的时刻，看看更改网格布局中元素的显示顺序是多么容易。在上面的示例中，我们的源顺序为，，和，但是在我们的媒体查询中，我们将元素设置为 element，以显示出 element上方。很容易与网格交换元素的显示顺序！我们甚至可以完全扭转所有这些的显示顺序。

即使不使用命名元素，我们也可以重新排序网格元素。默认情况下，网格项目根据其HTML源订单放置。他们的默认顺序为0。我们可以使用此订单属性来更改元素的视觉布置。订单值越低，出现元素就越早。即使是负整数也可以使用，因此，如果我们的

元素的顺序为-1，它将首先出现。

>如上所示，我们可以将，

和的订单值分别设置为1、2和3。（请查看这支笔以进行现场演示。）

> 不过，一个谨慎的词：重新排序的元素可以是一场噩梦，以供访问性，焦点不可预测地围绕屏幕跳跃，因此请谨慎使用。

进一步阅读：

>我们在上面看到，我们可以使布局响应不同的屏幕尺寸。首先，通过将列宽度设置为诸如FR之类的柔性单元，布局可以根据需要生长和收缩。其次，我们可以使用媒体查询在某些断点处重新组织布局。

网格布局具有无需使用媒体查询即可进行布局反流的工具。但是，我们无法通过以上合作的布局来实现这一目标。它仅适用于更简单的布局，其中每列共享相同的宽度。

考虑以下html：

让我们在宽屏幕上并排坐在这些divs上，然后堆放在小屏幕上：

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

>您可以在下面的笔中看到结果。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

请参阅codepen上的sitepoint（@sitepoint）

的响应式网格基础：codepen。

（同样，按下底部的0.5倍按钮，以查看布局的响应。）

>代码更为高级，我们在如何使用CSS GRID重复（）函数方面对其进行了详细说明。在此处显示它的主要目的是让网格布局的可能性。

进一步阅读：

>阅读有关自动拟合关键字的更多信息。
>阅读有关使用min（）函数使用minmax（）函数的更多信息。

网格中的重叠元素

>创建网格布局后，我们不仅可以将每个网格项目分配给其自己的单独的网格区域。我们可以轻松地设置网格项目以部分或完整分享相同的网格区域。这使我们能够创建美丽，创意的布局 - 具有重叠的元素，而没有任何棘手的代码。

>让我们创建一个包含图像的简单网格和部分涵盖图像的文本。这是html：

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

>现在，我们将分配一些行和图像之间部分共享的行和列：>

该结果显示在以下Codepen演示中。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

请参阅pen

css网格基础：sitepoint（@sitepoint）

上的分层网格元素。

div出现在图像上方，仅仅是因为它按照源顺序遵循图像。我们可以通过应用z索引来更改另一个元素在另一个元素上出现。例如，尝试将z索引2的z索引设置为上方的图像；现在它将涵盖Div。进一步阅读：

要了解图像在上面的演示中的定位，请查看如何使用CSS对象拟合和对象位置。

了解有关Z-Index属性的更多信息。

巨大的

您可以了解网格。>

网格与Flexbox

一个永恒的问题是我们是否应该使用网格或flexbox。的确，这两个布局工具可以做的事情之间存在一些重叠。通常，在有重叠的地方，值得进行一些测试以查看哪种特定情况下具有更好的工具包。>

作为一般规则，请记住这一点：

>

Flexbox主要设计用于朝单个方向铺设元素（即使这些元素跨线包装）。

网格设计用于在两个方向上布置元素，以便它们水平和垂直对齐。

。
浏览器支持网格

>当我们首次发表本文（早在2016年）时，网格对浏览器来说是相当新的，并且支持并不是普遍的。如今，所有主要浏览器都支持网格。仍然会有一些较旧的浏览器不支持它，但是在许多情况下，这些浏览器仍然可以很好地显示内容。一种不错的选择方法是从移动设备的单列布局开始，这可以作为不支持网格布局的浏览器的后备。可以通过媒体查询添加网格样式的浏览器，以支持它们的浏览器 - 将显示在较宽的屏幕上。
您可以查看Caniuse上网格的最新浏览器支持。
>
学习网格的资源

>最后，让我们以一些进一步的学习资源结束。许多了不起的人提供了有关网格的教程，视频，书籍等。这里只有几个：

Tiffany Brown的第三版
- CSS Master，第三版，是CSS的一个很好的介绍，并在如何使用网格和其他布局方法的深度指导下进行了深入的指导。>
- >
- > CSS-Tricks为CSS网格提供了完整的指南，这是一个非常方便的资源。
CSS网格布局是CSS中的一个布局系统，可让您为网页创建复杂的基于二维网格的布局。它提供了一种更加灵活，更有效的方法来设计和定位元素在网格中。
>
>如何在网页上启用CSS网格？

启用CSS网格，您可以使用显示：网格; CSS代码中的属性。这将使所选的容器成为网格容器。
>
CSS网格的主要组件是什么？
> CSS网格的主要组件是网格容器和网格项目。使用显示器来定义容器：网格；属性，这些项目是放置在容器内的元素。
>
>如何在CSS网格中定义行和列？
>您可以通过设置诸如网格 - 网络之类的属性来定义行和列来定义行和列 - 排，网格 - 板块柱或使用速记属性网格板。

>我可以在CSS网格中具有不同的列宽度和行高度吗？通过在网格模板定义中使用不同的值，例如固定长度，百分比或用于柔性尺寸的FR单元。
我可以在网格中嵌套网格吗？

是的，您可以将网格嵌套在网格中，通过使网格项目本身为网格容器来创建复杂的布局。

我可以使网格适应不同的屏幕尺寸吗？您可以使用媒体查询，百分比或相对单元将网格布局调整到不同的屏幕尺寸和设备中。
>

以上是初学者的CSS网格布局指南的详细内容。更多信息请关注PHP中文网其他相关文章！

css html Object Resource define if for while include try catch auto using Length finally Property number function default this display position viewport transform column table word Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：20 Simple Ways to Style the HTML details Element下一篇：Building a 3D Card Flip Animation with CSS Houdini

查看更多