CSS网格布局简介和示例

您将要创造的

在本教程中，我将通过示例场景介绍CSS网格布局的基础。 现在，几乎所有现代浏览器都支持CSS Grid，并且可以在生产中使用CSS Grid。 与其他布局方法（例如flexbox）不同，网格布局为您提供了两个自由度，这使其用途广泛，以至于轻松放置元素。

CSS网格布局HTML结构

为了使用CSS Grid布局，您HTML元素应具有特定的结构。

您需要将要控制的元素包装在父容器DIV中。

<div class="wrapper">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

让我们为DIV添加一些样式，以便我们可以轻松区分它们。

另外，在wrapper DIV中设置display: grid ，以便我们可以开始使用网格布局。

.wrapper > div{
  background-color: orange;
  border: 1px black solid;
}

.wrapper > div:nth-child(odd){
  background-color: indianred;
}

.wrapper{
  display: grid
}

从这一点开始，所有样式都将进入wrapper DIV。 如果我们想随时控制子DIV，则将为特定子DIV添加特定于网格的样式规则。

父母DIV规则

我们需要了解的有关网格布局的第一件事是grid-template-columns和grid-template-rows 。 这两个规则基本上控制着网格的形状。

这些规则的值可以是网格中可用空间的长度，百分比或分数。 您还可以将任何值设置为auto ，以填充剩余空间。

让我们在下面看一些例子。

网格模板列和网格模板行

网格模板列

.wrapper{
  display: grid;
  grid-template-columns: 100px 100px 100px
}

.wrapper{
  display: grid;
  grid-template-columns: 100px auto 100px
}

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

网格模板列和网格模板行

让我们开始构建一个真实的网格，在该网格中我们可以控制列和行。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 20px 250px;
  grid-template-rows: 150px 40px;
}

在这里，我只为同一个CSSHTML添加了两个子DIV。

重复网格模板模式

如果您对grid-template有重复的模式，   您可以使用重复并告诉它重复相同模式多少次。

例如，假设您有12个元素，并且想要将它们以相等的宽度水平放置。 您可以在grid-template-columns内重复1fr 12次，这是无效的。 因此，您可以使用repeat(12, 1fr) 。

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr)
}

同样，您可以重复一个模式。

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr 5fr 10fr);
}

网格自动列和网格自动行

此规则可帮助您设置网格单元的宽度和高度。

如果未设置此规则，则网格行和列将随内容扩展。

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 20px 80px;
 }

minmax函数是与grid-auto规则一起使用的一个不错的功能。

您只需将最小大小设置为第一个参数，将最大大小设置为第二个参数。 如果将第二个参数设置为“ auto ”，则会得到一个响应的单元格大小。

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto)
 }

在下面，您将看到两个具有相同CSS规则的不同DIV内容。

网格间隙

顾名思义，此规则在网格单元之间创建了间隙。

如果使用grid-gap: 5px ，则每个单元格之间的间隙为5px。 或者，您只能设置行或列间隙，分别使用grid-row-gap: 5px和grid-column-gap: 5px 。

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 5px;
 }

儿童DIV规则

到目前为止，我们仅关注网格的形状和刚在网格中流动的项目。 现在，我们将学习如何单独控制每个项目。

为了放置项目，我们使用网格线作为参考。 在下面，您将看到2x4网格的黑色和橙色行和列线。

我们将使用带有行号的grid-column和grid-row规则来定位元素。

例如，如果我们为第一个子div设置grid-column: 1/3 ，它将使用网格中的前两个单元格。

考虑下面HTML和CSS：

<div class="wrapper">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
  <div class="div7">7</div>
  <div class="div8">8</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 5px;
 }

wrapper DIV中有四个大小相等的列和八个元素。

.div1{
   grid-column: 1/3;
 }

.div1{
   grid-column: 1/3;
   grid-row: 1/3;
 }

您还可以将这两个规则合并为一个规则，即grid-area: rowStart/columnStart/rowEnd/columnEnd 。

.div1{
   grid-area: 2/2/3/4;
 }

如以上示例所示，元素未绑定到HTML结构。 请注意如何使用grid-area规则重新定位第一个元素。

网格区域和网格模板区域

您可以命名每个子元素，并使用这些名称创建网格。 这确实非常强大，并且使布局更直观。

因此，我们为计划放置在网格系统中的每个元素定义了一个DIV。

我计划有一个页眉，leftColumn，rightColumn，middleTop，middleBottom和页脚。

因此，在我HTML中，我需要那么多子DIV。 类名可以是任何东西。

<div class="wrapper">
  <div class="header">Header</div>
  <div class="leftCol">LeftCol</div>
  <div class="rightCol">RightCol</div>
  <div class="midTop">midTop</div>
  <div class="midBottom">midBottom</div>
  <div class="footer">Footer</div>
</div>

然后，在我CSS中，设置grid-area名称。 这些名字可以是任何东西。 它们不应与类名匹配。

.header{
   grid-area: header;
   background-color: LightSeaGreen ;
 }
 
 .leftCol{
   grid-area: leftCol;
   background-color: orange;
 }
 
 .rightCol{
   grid-area: rightCol;
   background-color: lightblue;
 }
 
  .midTop{
   grid-area: midTop;
   background-color: lightgrey;
 }
 
 .midBottom{
   grid-area: midBottom;
   background-color: pink;
 }
 
 .footer{
   grid-area: footer;
   background-color: lightgreen;
 }

然后，在wrapper DIV中，我使用grid-template-areas规则通过引用其定义的名称来布局这些元素。

请注意，我有一个4x4的网格。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 4fr 4fr 1fr;
  grid-template-rows: 50px 100px 100px 30px;
  grid-template-areas:
  "header header header header"
  "leftCol midTop midTop rightCol"
  "leftCol midBottom midBottom rightCol"
  "footer footer footer footer";
  grid-gap: 5px;
 }

例如，如果我希望页脚仅占据两列并居中，则只需在grid-template-areas中用点（ . ）替换页脚的第一个和最后一个外观。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 4fr 4fr 1fr;
  grid-template-rows: 50px 100px 100px 30px;
  grid-template-areas:
  "header header header header"
  "leftCol midTop midTop rightCol"
  "leftCol midBottom midBottom rightCol"
  ". footer footer .";
  grid-gap: 5px;
 }

结论

CSS Grid有很多规则，在本教程中我仅介绍了最有用的规则。 您仍然可以深入挖掘MDN Web文档或任何其他来源以获取网格属性和功能的完整列表。

翻译自: https://code.tutsplus.com/tutorials/introduction-to-css-grid-layout-with-examples--cms-25392