使用CSS网格创建响应式网页布局

来源:设计前沿收集 作者:蒂莫西·史密斯 时间:2017-08-26

CSS Grid Layout每天都在浏览器支持中越来越多,我们可以将CSS Grid运送到生产环境中。CSS Grid的快速采用是非常显着的。

在我们使用CSS网格制作响应式投资组合网站布局之前,首先要清楚几点:CSS Grid不是Flexbox的替代品。它甚至不是浮标的替代品。事实上,你可能会意识到我们一直在使用Flexbox做CSS Grid做得更好的事情。但是,我们可以从组合的角度考虑替代,而不是思考。

CSS技巧来改变你的布局

想象一下花生酱和果冻三明治。花生酱和果冻本身是相当不错的,但是当他们聚在一起时,一件新事物诞生了,发生了魔力。

这就是我们的布局工具。他们对于他们单独做的事情很好,但是当它们结合在一起时,会发生魔法,我们可以创建新的令人兴奋的布局。在这种情况下,我们将使用CSS Grid和Flexbox构建我们自己的Web&PBB。

01.设置你的标记

我们的布局看起来不是很多,但我们的六个项目的骨架已经到位了

在本教程中,我们将一起使用CSS Grid和Flexbox来创建响应式的投资组合布局。这些盒子中的每一个都是不同的大小,其中一些是横跨行,每个框都有一个位于底部的标题。我们将使用Flexbox附带的一些很好的对齐工具来实现。

我们开始设置我们的标记。

<ul class=”boxes”>
  <li>
    <div class=”boxes__text-wrapper”>
      <h2>Case Study Title</h2>
      <p>A catchy description for our case study. We worked hard.</p>
    </div>
  </li>
</ul>

  • 我们将复制该列表项目和其中的所有内容六次,以便我们可以玩的项目。如果你想知道,我们决定在这里使用ul元素,因为这是一个条目列表。随意使用任何感觉适合您。

在列表项目的内部,我们有一个包含.boxes__text-wrapper类的div,它将包含案例研究的标题及其附带的描述。

02.写基础风格

我们将字体设置为更好,并从标题和段落中删除了默认保证金

现在我们来设定一些基础样式来处理。

body {
  font-family: Avenir, sans-serif;
  margin: 2rem auto;
  width: 95%;
}
h2,
p {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.boxes > * {
  padding: .5rem;
  background-color: #333;
  color: white;
}

我们已将字体更改为Avenir。我们将从我们的标题和段落中删除边距,并重新设置无序列表。我们还会为每个列表项提供一些默认样式,以帮助我们查看每个样式。

03.设置你的网格

只有三条线,我们在我们的网格项之间添加了一条沟,并使它们更高一些

我们首先要构建我们的手机布局。在小屏幕上设置我们的网格就像这样简单:

.boxes {
  display: grid;
  grid-auto-rows: minmax(125px, auto);
  grid-gap: .5rem;
}

网格将我们的项目堆叠在一起,因为默认情况下只有一列。我们将通过使用grid-gap在每个案例研究之间创建一些空间- 这样我们可以在行和列之间添加一个沟槽。

忘记添加一个页边距只需要复杂的第n个子选择器; 沟槽仅出现在列或行之间,从不在列或row之前或之后.grid-gapgrid-column-gapgrid-row-gap的缩写 
 。通常我们会用这个手段,但随着浏览器的增长,我们将会覆盖这两个方面,所以我们将使用速记。

接下来,我们将使用网格自动行来告诉我们的网格容器新行的高度。网格将创建新行以放置所有内容。我们可以使用grid-auto-rows属性来控制这些自动创建的行的大小。我们正在使用一个可用的新功能:minmax()。使用minmax()我们可以指定最小大小和最大大小。

使用我们的代码,我们说我们希望我们的行最小为120px,最大为auto。我们在这里使用auto,因为如果内容需要,我们希望我们的行增长。

04.设置大浏览器兼容性

我们的网格正在形成!我们有六列在我们的网格项目之间工作和更少的沟槽

我们设置我们的页面,以便当我们的浏览器为40em或更大时,我们的网格容器有六列,每列一个。

@media screen and (min-width: 40em) {
  .boxes {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 2px;
  }
}

grid-template-columns是我们用于告诉我们的网格的属性,应该存在多少列。它接受我们知道和喜欢的所有长度单位,如remempxpercent, 
 vwvhfr

FR是我们用CSS网格布局得到一个新的单位。有了它,我们可以告诉浏览器做数学而不是我们 - 优秀。

通过告诉浏览器创建一个分数的六列,浏览器将计算我们的网格容器的宽度并将其拆分成六个相等的列。另外,因为网格很聪明,所以在计算我们指定的沟槽之后,它只会划分剩下的空间。

个人物品

咖啡使一切看起来更好不是吗?此外,微妙的渐变使我们的标题和描述脱颖而出

我们的案例研究看起来只是灰色的盒子。我们添加一个背景图像,让我们的标题显示在这些框的底部,并添加一个渐变,使我们的标题脱颖而出。

.boxes li {
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),
    url(path/to/image);
  background-size: cover;
  display: flex;
  align-items: flex-end;
}

这个背景图像是Unsplash的免费图像,但是可以随意使用您想要的图像。我也将Flexbox融入到我们的盒子底部。你还不会看到,但是当我们放置每个不同的盒子时,你最终会看到它的工作。

将项目放在网格上

网格使得我们想要的尺寸我们的网格项目变得非常容易。但这只是开始

不幸的是,Grid没有办法自动将项目放在我们开始看到的网格布局中。然而,幸运的是,Grid确实为我们提供了手动操作的工具。在本教程中,我们将使用第n个孩子来放置每个列表项。在一个生产网站中,我们建议使用一个类,鉴于正确的规划,可以在内容繁重的站点中自动执行这样的布局。

让我们开始我们的第一个项目。

@media screen and (min-width: 40em) {
  .boxes li:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: span 3;
  }
}

我们将把我们所有的放置样式放在我们之前写过的媒体查询中,因为我们希望在浏览器为40em或更大之后发生这种布局。随着第n个孩子,我们所定位的第一个列表项。CSS Grid可以让我们轻松地将我们的项目与网格列和网格列放置。有多种不同的方式来指定物品应该在哪里,但是这里我们告诉我们的项目从第一列开始,并将整个容器用-1表示。

然后,使用网格列,我们告诉项目跨越三行。我们如何知道三行将是我们想要的尺寸?那么我们在几分钟之前用grid-auto-rows来指定这些行的大小,如果我们不满意,我们可以改变最小的大小。

我们把剩下的东西放在一起

@media screen and (min-width: 40em) {
  .boxes li:nth-child(2) {
    grid-column: span 2;
    grid-row: span 7;
  }

  .boxes li:nth-child(3) {
    grid-column: span 4;
    grid-row: span 3;
  }

  .boxes li:nth-child(4) {
    grid-column: span 2;
    grid-row: span 4;
  }

  .boxes li:nth-child(5),
  .boxes li:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

控制格局布局给我们带来的不是很好吗?只有几行代码,我们可以组合一个完全响应的布局,如果添加了更多的项目,则不会中断。

当然,他们可能看起来有点笨,因为默认情况下它们只占用一个网格列和行,但是它不会破坏我们的布局。如果我们这样做是浮动的,固定的宽度和高度,如果要添加更多的内容,我们将会受到约束。

我们完成布局!这不是很神奇吗?网格允许我们轻松地将我们的项目放在两个维度上

快速抛开旧版浏览器

好的,现在是时候解决房间里的大象了。“老式浏览器呢?” 这个问题的答案与CSS中的任何新功能相同:使用功能查询并拥抱级联。功能查询得到很好的支持,无论我们在哪里,我们都可以将我们的回退放在第一位。例如,我们会按照以下方式写一些东西:

.your-selector {
  display: flex;
}

/* Your Grid code */
@supports (display: grid) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem 2rem;
}

以这种方式编写代码意味着如果浏览器了解“网格布局”,它将使用它而不是Flexbox。另外,由于我们正在接受级联,因此不了解功能查询的浏览器将忽略它们,并且已经拥有所需的信息。我们可能需要规划我们的样式比平常多一点,但是通过这样做,我们可以创造出具有明显后盾的美观布局。

另外,随着时间的推移,CSS Grid只会有越来越多的支持。只要想想后来删除我们的后遗症并留下所有的网格相关的CSS是多么好。当您了解Grid的更多信息时,您将会意识到,现在我们做了很多事情,现在有了更少的CSS行。