如何在您的网站上创建完美的CSS网格[示例布局]

* {盒子尺寸：Border-Box;}

图像源

and the number of columns inside a row always adds up to 12:

接下来，您需要确保清除浮子，确保行中的所有列在页面的流程中：

图像源

From there, you can add additional styling to customize the grid according to your website's branding.

If this sounds like too much work, then you might want to build with a前端开发框架，例如Bootstrap CSS。You can use the Bootstrap's built-in grid system so you're not creating grids from scratch. That way, you can focus on the content in the grid rather than the grid itself.

了解有关CSS网格，引导程序和Flexbox之间差异的更多信息。

CSS Grid Example Layouts

现在，我们已经涵盖了CSS网格的基础知识，让我们看一下基本的CSS网格布局示例。以下一些示例是网页设计师瑞秋·安德鲁（Rachel Andrew）并因此引用。

基于线路的位置布局

创建CSS网格时，通常将项目基于列和行线将项目定位在网格上。下面的示例是一个简单的网格，带有三列和两个行。它包含六个项目，它们都没有跨越多个网格轨道。

这是定义网格的HTML。请注意，每个网格项目都有自己的班级名称。这将使您可以使用类选择器对CSS中的每个网格项目应用唯一的样式。

图像源

以下是定义六个网格项目的位置的CSS。请注意，有六个规则集可以定义网格柱启动，网格柱末端，网格行 - 启动和网格行端属性，每个网格项目都有线号。

图像源

Here's the result on the front end:

图像源

Using Shorthand Grid-Row and Grid-Column Properties

We can create the same grid layout from above using shorthand grid-column and grid-row properties.

这se shorthand properties can save you time and make your code look cleaner. Rather than writing out the grid-column-start and grid-column-end properties on two separate lines, you can combine them into one line under the grid-column shorthand. To define this shorthand property, make the first number the column line where the grid item starts and the second number represents the column line where the grid item ends. Separate the values with a slash.

您可以为网格行速记属性做同样的事情。

这是上面使用速记网格列和网格行属性重写上面示例的CSS：

图像源

这HTML would stay the same, and the grid would look the same on the front end.

使用速记区域属性

我们还可以使用速记区域属性创建相同的网格布局。

This shorthand property can save you even more time by requiring less code. It's just a bit more difficult to remember the order of property values.

对于六个规则集中的每一个，您需要做的就是定义具有四个值的网格区域属性。值的顺序为：网格项目启动 /列线的行，网格项目启动 /行线，网格项目结束 /网格项目结束。

Here's the same CSS from the example above rewritten using the shorthand grid-area property:

图像源

这HTML would stay the same, and the grid would look the same on the front end.

使用列和行名称

除了使用行号外，您还可以选择命名网格线并改用这些线路。这将需要您更改定义整个网格的CSS，并定义定义六个网格项目的CSS。

首先，在班级选择器下。wrapper，您会找到网格 - 板块柱和网格 - 板行属性。在先前的示例中，仅将100px定义了三次网格板柱属性。含义，每列的尺寸同样宽为100px宽。这就是CSS的外观：

图像源

For this example, we'll have to define both the grid-template-columns and grid-template-rows property with lines names and values. Each column will be named "col1-start," "col2-start," and "col3-start," respectively, and set to 100px. Each row will be named "row1-start" and "row2-start," respectively, and set to "auto." Here's the CSS:

.wrapper {

display: grid;

grid-gap: 10px;

grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px;

网格 - 板板行：[row1-start] auto [row2-start] auto [row2-end];

背景色：#FFF;

color: #444;

}

Now here's the same section of CSS from the example above, rewritten using shorthand properties and grid line names.

。一个 {

网格列：COL2启动；

grid-row: row1-start;

}

。b {

网格列：COL2启动；

网格行：row2-start;

}

。c {

网格列：COL3启动；

grid-row: row2-start ;

}

.d {

网格列：COL1启动；

网格行：row1-start;

}

.e {

网格列：COL1启动；

grid-row: row2-start ;

}

。F {

网格列：COL3启动；

网格行：row1-start;

}

这HTML would stay the same, and the grid would look the same on the front end.

基于线路的位置布局跨越一个以上的网格轨道

现在，我们了解了为基于线路的位置布局编写代码的不同方式，让我们考虑一个更复杂的示例：定位项目涵盖多个网格轨道。下面的网格仅包含四个网格项目。一个项目将跨越列更多，另一个项目将跨越一行。

这是定义网格的HTML。

图像源

下面是CSS定义的位置four grid items. Notice that the shorthand grid-column and grid-row properties are being used and that most instances only have one value defined. That's because you only need to define the start and end values for the grid items that you want to span multiple tracks.

For example, to have grid item A span two columns, you can define the grid-column shorthand property by making the first value a "1" and the second value a "3." To have grid item B span two rows, you can define the grid-row shorthand property by making the first value a "1" and the second value a "3."

图像源

Here's the result on the front end:

图像源

Using the Span Keyword

我们可以使用SPAN关键字从上方创建相同的网格布局。

与其写出两个跨越一个网格轨道的两个项目的网格列和网格曲线属性的最终值，不如写“跨度”，并包括您希望该项目跨度的列或网格的数量。

Here's the same CSS from the example above rewritten using the span keyword. Items A and B span two columns and two rows respectively, so the end value is "span 2." Note that many properties are only defined by one value. In that case, the default of spanning one column or row is assumed.

图像源

这HTML would stay the same, and the grid would look the same on the front end.

Holy Grail Layout

You may have noticed many web pages have a similar structure. There'a header at the top, footer at the bottom, and content area in between. This content area is situated between two columns. Let's say you were to look at the source code of these pages. Ideally, you'd see the content area come first, followed by the two columns. Before CSS grid, this was difficult to achieve. With the CSS grid, it's easy.

在下面，我们将查看已创建“圣杯布局”的代码和布局。

这是定义标题，导航侧栏，主内容（元素），右侧栏（ element）和页脚的HTML。请注意，如果您愿意，可以将项目替换为另一个元素。

标题


<导航>
导航



Article

Here's the CSS defining the grid and grid items. Note that I used the fr unit to define each column. The fr unit represents a fraction of the available space in the grid container rather than a set amount, and ensures that grid tracks grow and shrink according to the available space. Note that I also used three different value types to define the track size of the rows. I also made every grid item (represented by the asterik) into a flex item with center alignment and justified content.

。网格 {
display: grid;
网格板柱：重复（3，1fr）;
网格板行：30％200px自动；
grid-gap: 1em;
}

.grid> * {
display: flex;
准项目：中心；
justify-content: center;
}

现在是时候为内容设计了。首先，我将更改标头，导航，文章，旁边和页脚元素的背景颜色和填充。然后，我将将网格柱启动和 - 端属性设置为1和4，以便它们跨越网格的长度。最后，我将为文章元素设置一个最小宽度，以便主内容占用大部分页面。

标题，
nav,
article,
在旁边，
页脚{
background: lightgray;
填充：1EM；
}

页眉页脚 {
网格列：1/4；
}

article {
min-width: 15em;
}

Here's the result on the front end:

图像源

Classic Blog Layout

You can create another similar and extremely popular layout with CSS grid known as the "Classic Blog Layout." This layout also has a full-width header and footer and a content area — but it has one sidebar instead of two.

这是HTML：

标题


博客文章

这是CSS：

。网格 {
display: grid;
grid-template-columns: 75% 25%;
网格板行：50px 200px 100px;
grid-gap: 1em;
}

标题，
页脚{
网格列开始：1;
网格柱末端：3;
}

.grid> * {
background: lightgray;
display: flex;
准项目：中心；
justify-content: center;
}

Here's the result on the front end:

图像源

如上所述，CSS网格被设计为可用于不同用例的灵活解决方案。尽管这种布局工具的基本概念无论您的情况如何，但魔鬼都在细节中 - 您必须了解各种元素如何共同起作用以产生有用的最终结果。

网站s Using CSS Grids

从理论上讲，我们已经谈论了很多关于CSS电网的信息，但是它们的外观如何？接下来，让我们检查一下从日历博客开始的五个出色的现实世界示例。

Calendly Blog

Calendly是一个计划应用程序，也可以运行博客。其主要文章目录以网格格式显示了帖子的链接，每张卡的文章预览。在这里，传统的网格格式使日历的内容易于消化 - 虽然大多数卡片都是白色的，但最突出的帖子被填写并在顶部占据着突出显示，以吸引眼睛。

Ikea

Ikea’s website implements a grid format on its main pages. Each item serves as a navigational link to a different area of the enormous website. Unlike the previous example, cells in this grid do not keep uniform widths and heights, but the widths of each item are all proportional to each other. In the screenshot below, the cell on the left is twice the width of the right-side items.

蒙特利尔综合医院

该网站的创建是为了庆祝蒙特利尔综合医院成立200周年。其主页具有基于网格的导航菜单。有趣的是，当您将光标悬停在每个项目上时，孩子元素会为填充更改而动画以表示选择。这是设计师如何将其他动态元素放置在图像和文本之外的网格单元中的创造性示例。

菲尔森

菲尔森sells outdoor clothing and accessories, and this couldn’t be more apparent from its homepage, which presents its site links as abroken grid。行略微错位，但是该网站在维护空间并保持最低限度的情况下保持整洁。

R64X

Finally, R64X is a digital gallery for art in the crypto space. This site also breaks the grid. However, Since its rows maintain equal widths, everything appears orderly. This is a smart way to accommodate the different dimensions of each piece while maintaining a grid for navigational ease

Perfecting the CSS Grid

通过花费理解CSS电网所需的时间，您正在为生产响应式网站创造一个良好的基础，使Google感到高兴，这与先前用于类似网站布局的弃用的表标签不同。

编者注：该帖子最初于2020年11月发表，并已更新以进行全面性。

最初出版于2021年5月18日上午7:00：00，更新于2021年5月18日