乐趣区

关于前端:使用-CSS-Grid-构建复杂布局超实用的技巧

jiezi

作者：Shadeed
译者：前端小智
起源：dmitripavlutin

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

网格布局是古代 CSS 中最弱小的性能之一。应用网格布局能够帮忙咱们在没有任何内部 UI 框架的状况下构建简单的、疾速响的布局。在这篇文章中，将会介绍所有咱们须要理解的 CSS 网格常识 ?。

CSS 网格的基础知识

咱们间接进入代码，如下所示，先写些标签，源码在这个链接外面：https://codepen.io/Shadid/pen/zYqNvgv

<div class="container">
  <header>Header</header>
  <aside>Aside 1</aside>
  <section>Section</section>
  <aside>Aside 2</aside>
  <footer>Footer</footer>
</div>

在下面，咱们创立了一个 header、两个aside 和一个 footer 元素，并将它们包装在一个container 元素中。咱们为容器元素中的所有元素增加背景色和字体大小。

.container > * {
  background: aquamarine;
  font-size: 30px;
}

运行的网页如下：

当初咱们增加一些网格属性：

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"
}

/* Assign grid areas to elements */
header {grid-area: header;}

aside:nth-of-type(1) {grid-area: aside-1;}

aside:nth-of-type(2) {grid-area: aside-2;}

section {grid-area: section;}

footer {grid-area: footer;}

首先，咱们定义了 display:grid，它将启用网格布局，而后咱们应用grid-gap 在网格元素中减少间隙。

接下来，咱们为每个 html 元素调配了一个网格区域名称。在container 类中，咱们能够应用grid-template-areas` 属性定 义 html 模板的外观，留神网格模板区域是如何排列的。

grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"

元素的程序与 dom 构造不同。然而，最终按咱们网络区域的程序来展现。

下一步是使咱们的页面具备响应性。咱们心愿在更大的屏幕上应用不同的布局。CSS 网格使得解决媒体查问和创立响应式布局变得非常容易。看上面代码：

@media (min-width: 670px) {
  .container {
    grid-template-areas: 
      "header  header  header"
      "aside-1 section  aside-2"
      "footer    footer    footer"
  }
}

咱们所要做的就是在媒体查问中从新排序网格模板区域。

网格列和行

如何应用 CSS 网格来组织列和？先从上面的代码开始：

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
  <div class="item">Six</div>
</div>

增加一些根本的 css

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
}

.item {background: lightcoral;}

咱们为下面的 dom 构造应用了网格布局，并应用 grid-gap 减少了格调之间的间距。当初，咱们应用 grid-template-columns 属性来增加一些列。

.container {
    display: grid;
    height: 100vh;
    grid-gap: 10px;
    grid-template-columns: 100px 200px auto auto;
}

就像这样，咱们应用了列。咱们指定第一列为 100px，第二列为200px。因为咱们在第3 列和第 4 列中利用了auto，因而残余的屏幕长度将在其中分成两半。

能够看到当初页面中有一个空白。如果我想将 第六列 移至 第三列 和第四列 怎么办？为此，咱们能够应用 grid-column-start 和grid-column-end属性。

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: 5;
}

留神，咱们应用 grid-column-end: 5，值5 指向列线。第四列在网格的第五行完结。grid-column-start和 grid-column-end 值是指网格线。

如果你感觉网格线的值让人困惑，你也能够应用span，上面的成果与下面一样：

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: span 2;
}

对于 span 2，指定div 占用网格中的两个插槽。当初，假如要扩大 第二列 填充上面的空白区域。咱们也能够通过 grid-column-start 属性轻松地做到这一点。

.item:nth-of-type(2) {grid-row-start: span 2;}

咱们应用 span 和grid-row-start来指定咱们想要占据两个插槽。

如上所见，咱们曾经可能应用大量的 CSS 网格属性来构建非常复杂的布局。

无效地应用 grid-templates

当初来看看grid-templates，在本节中，咱们将探讨如何为不同的屏幕大小创立不同的布局。

首先，还是先来一段 dom 构造：

<div class="container">
  <header>header</header>
  <aside>Left</aside>
  <section>Section</section>
  <aside>Right</aside>
  <footer>Footer</footer>
</div>

接着，增加一些款式：

“
.container {
display: grid;
height: 100vh;
grid-gap: 10px;
}

.container > * {
background: coral;
display: flex;
justify-content: center;
align-items: center;
}`
“

咱们给元素增加了背景色。从下面的代码中能够看到，咱们也应用了 flex 属性。咱们能够将 flex 和grid联合在一起。在这个非凡的例子中，咱们应用 flex 属性核心对齐内容。

对于挪动端，咱们心愿 section 在header上面，right 在 section 上面，咱们能够应用网格区域来实现。首先，咱们定义网格区域：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
   "header"
    "section"
    "right"
    "left"
    "footer"
}

aside:nth-of-type(1) {grid-area: left;}

aside:nth-of-type(2) {grid-area: right;}

section {grid-area: section;}

footer {grid-area: footer;}

header {grid-area: header;}

在 grid-template-areas 中能够看到，咱们先有 header，而后是section，而后是right，最初是left。此外，咱们心愿咱们的section 比 left 和 right都大点。为了实现这一点，咱们能够应用 rid-template-rows 属性 ?

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
    "header"
    "section"
    "right"
    "left"
    "footer";
  grid-template-rows: 1fr 6fr 2fr 2fr 1fr;
}

少了一张图片

咱们能够依据须要设置挪动端的视图，接下咱们应用媒体查问来适配一下大屏幕：

@media (min-width: 500px)  {
  .container {
    grid-template-areas: 
      "header header  header"
      "left   section right"
      "footer footer  right";
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-columns: 1fr 6fr 1fr;
  }
}

如何应用 minmax 函数动静跟踪元素的大小

假如咱们有两列，它们平均地占据了屏幕上的可用空间。通过应用 grid-template-columns，咱们能够很容易地做到这一点。然而，如果咱们想要其中一个在 200px 到500px之间呢? 咱们的列能够适应不同的屏幕尺寸，但其中一个永远不会大于 500px 或小于200px。

对于这些类型的场景，咱们应用 minmax 函数。让咱们来看看它的实际效果。

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
</div>
.container {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {background: cyan;}
.two {background: pink;}

在这个例子中，第一列总是在 200px 到500px之间。然而，第二列的最小值能够是100px，对于更大的屏幕，它将笼罩屏幕的其余部分。

如何应用 repeat 函数？

咱们讨论一下元素中的反复模式。咱们如何解决它们? 咱们能够反复咱们的代码或应用 javascript。不过，还有另一种办法能够用 css 来实现。repeat函数示意轨道列表的一个反复片段，容许以更紧凑的模式编写显示反复模式的大量列或行。

<div id="container">
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    Inflexible item of 100 pixels width.
  </div>
</div>
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

嵌套网格

我还能够将网格嵌套在另一个网格中，来看看如何实现这一点：

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item inner-grid">
    <div class="item">i</div>
    <div class="item">ii</div>
    <div class="item">iii</div>
    <div class="item">iv</div>
    <div class="item">v</div>
    <div class="item">vi</div>
  </div>
  <div class="item">Five</div>
  <div class="item">Six</div>
</div>

咱们首先在内部 container 上申明网格：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}

留神，咱们在网格模板中有一个 repeat 函数，并将其与一个 minmax 函数组合在一起。咱们当初也能够将网格属性利用到外部网格。

.inner-grid {
  display: grid;
  background: white;
  height: 100%;
  grid-gap: 5px;
  grid-template-columns: repeat(3, auto);
}

这样，咱们网格中嵌套了一个网格。

明天就跟大家分享到这里，感激大家的观看，咱们下期再见！

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://blog.soshace.com/how-…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版