了解 CSS 网格：创建网格容器

Desknumber

在一个新系列中，Rachel Andrew 详细分析了 CSS 网格布局规范。这次，我们详细了解创建网格容器时会发生什么，以及可应用于该容器来塑造网格的各种属性。 这是 Smashing Magazine 关注 CSS 网格布局的新系列的开始。虽然 Grid 自 2017 年起就在浏览器中可用，但许多开发人员还没有机会在项目中使用它。似乎有很多与 CSS 网格布局相关的新属性和值。这可能会让事情看起来势不可挡。

然而，相当多的规范细节改变了做事的方式，这意味着你不必学习整个规范来开始。本系列旨在将您从网格新手变成专家，并在此过程中提供许多实用的使用技巧。 这篇初始文章将介绍创建网格容器时发生 电子邮件营销列表 的情况以及可在父元素上使用来控制该网格的各种属性。您会发现有几个用例只能通过应用于网格容器的属性来实现。 在本文中，我们将介绍： 使用或创建网格容器， 使用  和设置列和行， 使用 和 控制隐式轨道的大小。



第 1 部分：创建网格容器 第 2 部分：网格线 第 3 部分：网格模板区域 认识前端、设计和开发用户体验，包括实用要点、现场会议、视频录制以及友好的问答。与 和许多其他人一起。 跳转至研讨会↬ 功能面板 创建网格容器 Grid 与 Flexbox 一样，是 CSS display 属性的值。因此，要告诉浏览器您要使用网格布局，请使用 。完成此操作后，浏览器将在元素上为您提供一个带有 display: grid 的块级框，并且任何直接子元素将开始参与 网格格式化上下文< /span>。