我们将复制该列表项目和其中的所有内容六次,以便我们可以玩的项目。如果你想知道,我们决定在这里使用ul元素,因为这是一个条目列表。随意使用任何感觉适合您。
在列表项目的内部,我们有一个包含.boxes__text-wrapper类的div,它将包含案例研究的标题及其附带的描述。
02.写基础风格
我们将字体设置为更好,并从标题和段落中删除了默认保证金
现在我们来设定一些基础样式来处理。
我们已将字体更改为Avenir。我们将从我们的标题和段落中删除边距,并重新设置无序列表。我们还会为每个列表项提供一些默认样式,以帮助我们查看每个样式。
03.设置你的网格
只有三条线,我们在我们的网格项之间添加了一条沟,并使它们更高一些
我们首先要构建我们的手机布局。在小屏幕上设置我们的网格就像这样简单:
网格将我们的项目堆叠在一起,因为默认情况下只有一列。我们将通过使用grid-gap在每个案例研究之间创建一些空间- 这样我们可以在行和列之间添加一个沟槽。
忘记添加一个页边距只需要复杂的第n个子选择器; 沟槽仅出现在列或行之间,从不在列或row之前或之后.grid-gap是grid-column-gap和grid-row-gap的缩写 。通常我们会用这个手段,但随着浏览器的增长,我们将会覆盖这两个方面,所以我们将使用速记。
接下来,我们将使用网格自动行来告诉我们的网格容器新行的高度。网格将创建新行以放置所有内容。我们可以使用grid-auto-rows属性来控制这些自动创建的行的大小。我们正在使用一个可用的新功能:minmax()。使用minmax()我们可以指定最小大小和最大大小。
使用我们的代码,我们说我们希望我们的行最小为120px,最大为auto。我们在这里使用auto,因为如果内容需要,我们希望我们的行增长。
04.设置大浏览器兼容性
我们的网格正在形成!我们有六列在我们的网格项目之间工作和更少的沟槽
我们设置我们的页面,以便当我们的浏览器为40em或更大时,我们的网格容器有六列,每列一个。
grid-template-columns是我们用于告诉我们的网格的属性,应该存在多少列。它接受我们知道和喜欢的所有长度单位,如rem,em,px,percent, vw,vh和fr。
该FR是我们用CSS网格布局得到一个新的单位。有了它,我们可以告诉浏览器做数学而不是我们 - 优秀。
通过告诉浏览器创建一个分数的六列,浏览器将计算我们的网格容器的宽度并将其拆分成六个相等的列。另外,因为网格很聪明,所以在计算我们指定的沟槽之后,它只会划分剩下的空间。
个人物品
咖啡使一切看起来更好不是吗?此外,微妙的渐变使我们的标题和描述脱颖而出
我们的案例研究看起来只是灰色的盒子。我们添加一个背景图像,让我们的标题显示在这些框的底部,并添加一个渐变,使我们的标题脱颖而出。
这个背景图像是Unsplash的免费图像,但是可以随意使用您想要的图像。我也将Flexbox融入到我们的盒子底部。你还不会看到,但是当我们放置每个不同的盒子时,你最终会看到它的工作。
将项目放在网格上
网格使得我们想要的尺寸我们的网格项目变得非常容易。但这只是开始
不幸的是,Grid没有办法自动将项目放在我们开始看到的网格布局中。然而,幸运的是,Grid确实为我们提供了手动操作的工具。在本教程中,我们将使用第n个孩子来放置每个列表项。在一个生产网站中,我们建议使用一个类,鉴于正确的规划,可以在内容繁重的站点中自动执行这样的布局。
让我们开始我们的第一个项目。
我们将把我们所有的放置样式放在我们之前写过的媒体查询中,因为我们希望在浏览器为40em或更大之后发生这种布局。随着第n个孩子,我们所定位的第一个列表项。CSS Grid可以让我们轻松地将我们的项目与网格列和网格列放置。有多种不同的方式来指定物品应该在哪里,但是这里我们告诉我们的项目从第一列开始,并将整个容器用-1表示。
然后,使用网格列,我们告诉项目跨越三行。我们如何知道三行将是我们想要的尺寸?那么我们在几分钟之前用grid-auto-rows来指定这些行的大小,如果我们不满意,我们可以改变最小的大小。
我们把剩下的东西放在一起
控制格局布局给我们带来的不是很好吗?只有几行代码,我们可以组合一个完全响应的布局,如果添加了更多的项目,则不会中断。
当然,他们可能看起来有点笨,因为默认情况下它们只占用一个网格列和行,但是它不会破坏我们的布局。如果我们这样做是浮动的,固定的宽度和高度,如果要添加更多的内容,我们将会受到约束。
我们完成布局!这不是很神奇吗?网格允许我们轻松地将我们的项目放在两个维度上
快速抛开旧版浏览器
好的,现在是时候解决房间里的大象了。“老式浏览器呢?” 这个问题的答案与CSS中的任何新功能相同:使用功能查询并拥抱级联。功能查询得到很好的支持,无论我们在哪里,我们都可以将我们的回退放在第一位。例如,我们会按照以下方式写一些东西:
以这种方式编写代码意味着如果浏览器了解“网格布局”,它将使用它而不是Flexbox。另外,由于我们正在接受级联,因此不了解功能查询的浏览器将忽略它们,并且已经拥有所需的信息。我们可能需要规划我们的样式比平常多一点,但是通过这样做,我们可以创造出具有明显后盾的美观布局。
另外,随着时间的推移,CSS Grid只会有越来越多的支持。只要想想后来删除我们的后遗症并留下所有的网格相关的CSS是多么好。当您了解Grid的更多信息时,您将会意识到,现在我们做了很多事情,现在有了更少的CSS行。