CSS Grid 快速入门

介绍

结论

介绍

在本文中，我将介绍 CSS Grid 的基础知识，包括它的定义以及如何上手使用。这既是为了帮助我自身的学习，也希望能为社区提供一些快速有效的帮助。
让我们一起来了解这项强大的技术吧！😄

什么是CSS Grid？

CSS Grid 允许你将一个区域划分成若干行和列，因此得名CSS Grid。这在构建布局时非常有用，因为你可以通过在 CSS 中指定元素的位置，将其放置在网格的任何区域。

CSS Grid入门

首先，你需要一个父容器，并为其应用一个特殊属性来激活网格。然后，将你想要包含在网格中的任何项目都放置在这个父容器内。

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

.container {
  display: grid;
 }

要启用 Grid 布局，我们只需将display属性的值设置为grid即可。这样就告诉浏览器，我们希望指定的容器是一个 Grid 布局，就这么简单。
之后，我们就可以使用一系列与 CSS Grid 相关的属性来构建布局了。

CSS 网格属性

• grid-template-columns：指定列的大小和数量
• grid-template-rows：指定行数和大小

用法示例

.container {
    ...
    /* Defining two columns with the size of 60px */
    grid-template-columns: 60px 60px;
}

使用这些属性时，您是在显式定义网格，这意味着您是在精确定义网格的行为方式。

如果我们定义列时没有指定任何行规则，CSS 将根据元素的大小隐式地为我们创建行。

• 网格间距：在网格的不同行和列之间创建一些间距。

用法示例

.container {
    ...
    /* Create 10 pixels of space on the top and bottom of each Grid element,
    and 20 pixels of space on the left and right sides. */
    grid-gap: 10px 20px;
}

• grid-auto-rows：定义隐式创建的行的大小
• grid-auto-columns：定义隐式创建的列的大小

用法示例

.container {
    ...
    grid-auto-columns: 1fr;
}

以上述示例为例，定义此属性后，添加到网格中的任何其他列都会自动占用页面上的一个可用空间。注意：这里的“fr”并非指“可用空间”，而是一种便于理解此单位运作方式的巧妙方法。

• 网格列（简写）
• 网格行（简写）

grid-column 是以下属性的简写：

• 网格列开始
• 网格列结束

grid-row 是以下属性的简写：

• 网格行开始
• 网格行结束

-start属性告诉 Grid 最初将项目放置在哪里，-end属性告诉 Grid 要放置的元素应该在哪个位置停止。

您指定的值指的是网格线。以正方形为例，左边的线是线 1，右边的线是线 2。

用法示例

.container {
    ...
    /* Start at column line 2, end at column line 4*/
    grid-column-start: 2;
    grid-column-end: 4;

    /* Shorthand */
    grid-column: 2 / 4;
}

网格模板区域

网格模板区域是一种为网格的不同部分命名的方法。使用的属性名为grid-template-areas。以下是其基本语法：

.container
{
 grid-template-areas:
      "sidebar-1 content sidebar-2"
}

语法大致遵循实际网格的结构。因此，前三列将分别命名为sidebar-1、content和sidebar-2。

要继续定义网格的其他区域，例如下面的行，您可以在新的一行上使用相同的名称来定义整个区域，或者使用新名称来标识网格的新部分。

.container
{
 grid-template-areas:
      "sidebar-1 content sidebar-2"
      "sidebar-1 content sidebar-2"
      "footer footer footer";
}

使用预先定义的页面元素类名，您可以利用网格模板区域名称来定义这些元素的放置位置。示例如下：

.footer
{
    grid-area: footer;
}

.item1
{
    grid-area: sidebar-1;
}

.item2
{
    grid-area: content;
}

.item3
{
    grid-area: sidebar-2;
}

这意味着，对于选中的每个项目，将其放置在我们指定的网格区域中。被放置的元素会自动定位到网格的指定区域内，使用`grid-area` 属性。

结论

这篇 CSS Grid 入门教程非常简短，旨在总结我通过以下资源学习到的基本概念：
Wes Bos：CSS Grid 课程；
Mozilla 开发者网络：CSS Grid 布局

感谢阅读👋！如果您有兴趣了解我的Web开发之旅，欢迎在Instagram和Twitter上关注我😄