CSS网格布局指南

该CSS网格布局模块出厂时带有一个新的CSS单元称为fr单元。尽可能简单,fr就是“分数”一词的缩写。新单元可以快速将网格分层成比例的列或行。因此,创建完全响应灵活的网格几乎变得轻而易举。 由于分数单元与网格布局模块一起引入,您可以在支持CSS网格的任何浏览器中使用。如果您还想支持旧版浏览器,这里是一个很好的 WP网站建设

CSS网格布局模块出厂时带有一个新的CSS单元称为fr单元。尽可能简单,fr就是“分数”一词缩写。新单元可以快速将网格分层成比例的列或行。因此,创建完全响应灵活的网格几乎变得轻而易举。

由于分数单元与网格布局模块一起引入,您可以在支持CSS网格的任何浏览器中使用。如果您还想支持旧版浏览器,这里是一个很好的CSS网格聚合填充,可以让您不仅可以使用fr单元,还可以使用其他网格功能。

基本用法

首先,我们来看一下使用分数单位的基本网格。下面的布局将空格分成三个等宽列两个等高的行

在属于HTML由6周的div打上.box阶级,一个内部.wrapper的div

HTML
1
2
3
4

6
7
8

<div class="wrapper">
  <div class="box box-1">1.</div>
  <div class="box box-2">2.</div>
  <div class="box box-3">3.</div>
  <div class="box box-4">4.</div>
  <div class="box box-5">5.</div>
  <div class="box box-6">6.</div>
</div>

 

要使用网格布局模块,您需要将display: grid;CSS属性添加到包装器。的grid-template-columns属性使用fr单元作为值; 该三列的比为1:1:1

对于网格行(grid-template-rows属性),我没有使用fr单位,因为只有包装器具有固定的高度才有意义。否则,在某些设备上可能会产生奇怪的结果,但是即使这样,fr设备仍然保持这个比例(这是巨大的)。

grid-gap属性在框之间添加一个10像素的网格。如果您不希望任何差距只是删除此属性。

CSS
1
2
3
4

6
7
8
9
10
11
12

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
}
.box {
  color: white;
  text-align: center;
  font-size: 30px;
  padding: 25px;
}

注意上面的CSS不包含一些基本的样式,如背景颜色。您可以在文章末尾的演示中找到完整的代码

变化率

当然,你不仅可以使用1:1:1,还可以使用任何比例。以下,我使用1:2:1的分数,也将空间分为三列,但中间的列将是其他两个宽度的两倍

我也增加了价值,grid-gap以便您可以看到它如何更改布局。基本上,浏览器从视口宽度扣除网格间隙(在本示例中,网格间距加起来为80像素),并根据给定的分数对其余部分进行分割。

CSS
1
2
3
4

6

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 40px;
}

结合fr其他CSS单位

您也可以将该单元与任何其他CSS单元结合使用。例如,在下面的例子中,我使用了我的网格的比例。fr60% 1fr 2fr

那么这是如何工作的?该浏览器分配该视口宽度的60%到第一列。然后,它将剩余的空间分成1:2分数。

同样的事情也可以写成60% 13.33333% 26.66667%。但坦率地说,为什么会有人想使用这种格式?分数单位的巨大优势在于它提高了代码的可读性。此外,它是完全准确的,因为百分比格式仍然只增加99.9999%。

CSS
1
2
3
4

6

.wrapper {
  display: grid;
  grid-template-columns: 60% 1fr 2fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
}

除了百分比,你也可以用其他的CSS单位连同部分单元,例如ptpxem,和rem

添加空格 fr

如果你不想让你的设计变得混乱,并添加一些空格到你的网格怎么办?分数单位也有一个简单的解决方案。

您可以看到,这个网格有一个空列,而它仍保留所有六个框。对于这种布局,我们需要将空间分成四列而不是三。所以,我们使用属性的1fr 1fr 1fr 1frgrid-template-columns

我们在grid-template-areas属性中添加空列,使用点表示法。基本上,此属性允许您引用指定的网格区域。而且,您可以grid-area使用您需要为每个区域单独使用的属性来命名网格区域

CSS
1
2
3
4

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
  grid-template-areas:
    "box-1 box-2 . box-3"
    "box-4 box-5 . box-6";
}
.box-1 {
  grid-area: box-1;
}
.box-2 {
  grid-area: box-2;
}
.box-3 {
  grid-area: box-3;
}
.box-4 {
  grid-area: box-4;
}
.box-5 {
  grid-area: box-5;
}
.box-6 {
 grid-area: box-6;
}

空白区域不一定必须形成列,它们可以在网格中的任何位置

repeat()功能

您还可以将该fr单元与该repeat()功能一起使用以获得更简单的语法。如果您只有一个简单的网格,但是当您想要实现复杂的布局(例如嵌套网格)时,可以派上用场,这不是必需的。

CSS
1
2
3
4

6
7

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-rows: 200px;
  grid-gap: 10px;
}

repeat(3, 1fr)语法产生相同的布局1fr 1fr 1fr。下面的布局与第一个例子相同。

如果增加repeat()函数内的乘数,您将有更多列。例如,repeat(6, 1fr)结果是六个相等的列。在这种情况下,我们所有的框都将在同一行中,这意味着只需要为该grid-template-rows属性使用一个值(200px)即可。

CSS
1
2
3
4

6

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 200px;
  grid-gap: 10px;
}

您可以使用repeat() 多次。例如,以下示例导致一个网格,其中最后三列是前三个列的两倍

CSS
1
2
3
4

6

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
  grid-template-rows: 200px;
  grid-gap: 10px;
}

您也可以与其他CSS单元结合repeat()使用。例如,您可以使用200px repeat(4, 1fr) 200px有效的代码。

如果您对如何使用CSS网格模块创建复杂的布局感兴趣,则该repeat()功能和fr单元Rachel Andrew会有一个有趣的博客文章,您可以如何做到这一点。

试用演示

最后,这是我承诺的演示。它使用与本文中第一个示例相同的代码。叉子,看看你可以实现与fr单位。

将简单的CSS网格布局集成到WordPress中

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/9339

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code