|
|
|
|
公众号矩阵

使用网络构建复杂布局超实用的技巧,赶紧收藏吧!

网格布局是现代CSS中最强大的功能之一。使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的、快速响的布局。在这篇文章中,将会介绍所有我们需要了解的 CSS 网格知识。

作者:前端小智 来源:大迁世界|2020-10-26 08:06

 

本文已经作者 soshace 授权翻译!

网格布局是现代CSS中最强大的功能之一。使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的、快速响的布局。在这篇文章中,将会介绍所有我们需要了解的 CSS 网格知识 。

CSS 网格的基础知识

我们直接进入代码,如下所示,先写些标签,源码在这个链接里面:https://codepen.io/Shadid/pen/zYqNvgv

  1. <div class="container"
  2.   <header>Header</header> 
  3.   <aside>Aside 1</aside> 
  4.   <section>Section</section
  5.   <aside>Aside 2</aside> 
  6.   <footer>Footer</footer> 
  7. </div> 

在上面,我们创建了一个header、两个aside和一个footer元素,并将它们包装在一个container 元素中。我们为容器元素中的所有元素添加背景色和字体大小。

  1. .container > * { 
  2.   background: aquamarine; 
  3.   font-size: 30px; 

运行的网页如下:

现在我们添加一些网格属性:

  1. .container { 
  2.   display: grid; 
  3.   grid-gap: 5px; 
  4.   grid-template-areas:  
  5.     "header" 
  6.     "aside-1" 
  7.     "aside-2" 
  8.     "section" 
  9.     "footer" 
  10.  
  11. /* Assign grid areas to elements */ 
  12. header { 
  13.   grid-area: header; 
  14.  
  15. aside:nth-of-type(1) { 
  16.   grid-area: aside-1; 
  17.  
  18. aside:nth-of-type(2) { 
  19.   grid-area: aside-2; 
  20.  
  21. section { 
  22.   grid-area: section
  23.  
  24. footer { 
  25.   grid-area: footer; 

首先,我们定义了display:grid,它将启用网格布局,然后我们使用grid-gap在网格元素中增加间隙。

接下来,我们为每个html元素分配了一个网格区域名称。在container 类中,我们可以使用grid-template-areas`属性定 义html 模板的外观,注意网格模板区域是如何排列的。

  1. grid-template-areas:  
  2.     "header" 
  3.     "aside-1" 
  4.     "aside-2" 
  5.     "section" 
  6.     "footer"  

元素的顺序与 dom 结构不同。但是,最终按我们网络区域的顺序来展示。

下一步是使我们的页面具有响应性。我们希望在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。看下面代码:

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

我们所要做的就是在媒体查询中重新排序网格模板区域。

网格列和行

如何使用 CSS 网格来组织列和?先从下面的代码开始:

  1. <div class="container"
  2.   <div class="item">One</div> 
  3.   <div class="item">Two</div> 
  4.   <div class="item">Three</div> 
  5.   <div class="item">Four</div> 
  6.   <div class="item">Five</div> 
  7.   <div class="item">Six</div> 
  8. </div> 

添加一些基本的 css

  1. .container { 
  2.   display: grid; 
  3.   height: 100vh; 
  4.   grid-gap: 10px; 
  5.  
  6. .item { 
  7.   background: lightcoral; 

我们为上面的 dom 结构使用了网格布局,并使用grid-gap增加了风格之间的间距。现在,我们使用grid-template-columns属性来添加一些列。

  1. .container { 
  2.     display: grid; 
  3.     height: 100vh; 
  4.     grid-gap: 10px; 
  5.     grid-template-columns: 100px 200px auto auto; 

就像这样,我们使用了列。我们指定第一列为100px,第二列为200px。由于我们在第3列和第4列中应用了auto,因此剩余的屏幕长度将在其中分成两半。

可以看到现在页面中有一个空白。如果我想将第六列移至第三列和第四列怎么办?为此,我们可以使用grid-column-start和grid-column-end属性。

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

注意,我们使用grid-column-end: 5,值5指向列线。第四列在网格的第五行结束。grid-column-start和grid-column-end值是指网格线。

如果你觉得网格线的值让人困惑,你也可以使用span,下面的效果与上面一样:

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

对于span 2,指定div占用网格中的两个插槽。现在,假设要扩展第二列填充下面的空白区域。我们也可以通过grid-column-start属性轻松地做到这一点。

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

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

如上所见,我们已经能够使用少量的CSS网格属性来构建非常复杂的布局。

有效地使用 grid-templates

现在来看看grid-templates,在本节中,我们将讨论如何为不同的屏幕大小创建不同的布局。

首先,还是先来一段 dom 结构:

  1. <div class="container"
  2.   <header>header</header> 
  3.   <aside>Left</aside> 
  4.   <section>Section</section
  5.   <aside>Right</aside> 
  6.   <footer>Footer</footer> 
  7. </div> 

接着,添加一些样式:

  1. `` .container { display: grid; height: 100vh; grid-gap: 10px; } 
  2. .container > * { background: coral; display: flex; justify-content: center; align-items: center; }` `` 

我们给元素添加了背景色。从上面的代码中可以看到,我们也使用了flex属性。我们可以将flex和grid结合在一起。在这个特殊的例子中,我们使用flex属性中心对齐内容。

对于移动端,我们希望section在header下面,right 在 section 下面,我们可以使用网格区域来完成。首先,我们定义网格区域:

  1. .container { 
  2.   display: grid; 
  3.   height: 100vh; 
  4.   grid-gap: 10px; 
  5.   grid-template-areas:  
  6.    "header" 
  7.     "section" 
  8.     "right" 
  9.     "left" 
  10.     "footer" 
  11.  
  12. aside:nth-of-type(1) { 
  13.   grid-area: left
  14.  
  15. aside:nth-of-type(2) { 
  16.   grid-area: right
  17.  
  18. section { 
  19.   grid-area: section
  20.  
  21. footer { 
  22.   grid-area: footer; 
  23.  
  24. header { 
  25.   grid-area: header; 

在 grid-template-areas 中可以看到,我们先有header ,然后是section,然后是right,最后是left。此外,我们希望我们的section比 left 和 right都大点。为了实现这一点,我们可以使用rid-template-rows属性

  1. .container { 
  2.   display: grid; 
  3.   height: 100vh; 
  4.   grid-gap: 10px; 
  5.   grid-template-areas:  
  6.     "header" 
  7.     "section" 
  8.     "right" 
  9.     "left" 
  10.     "footer"
  11.   grid-template-rows: 1fr 6fr 2fr 2fr 1fr; 

少了一张图片

我们可以根据需要设置移动端的视图,接下我们使用媒体查询来适配一下大屏幕:

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

如何使用minmax函数动态跟踪元素的大小

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

对于这些类型的场景,我们使用minmax函数。让我们来看看它的实际效果。

  1. <div class="container"
  2.   <div class="one">One</div> 
  3.   <div class="two">Two</div> 
  4. </div> 
  1. .container { 
  2.   display: grid; 
  3.   height: 100vh; 
  4.   grid-template-columns: minmax(200px, 500px) minmax(100px, auto); 
  5. .one { 
  6.   background: cyan; 
  7. .two { 
  8.   background: pink; 

在这个例子中,第一列总是在200px到500px之间。然而,第二列的最小值可以是100px,对于更大的屏幕,它将覆盖屏幕的其余部分。

如何使用 repeat 函数?

我们讨论一下元素中的重复模式。我们如何处理它们?我们可以重复我们的代码或使用javascript。不过,还有另一种方法可以用css来实现。repeat函数表示轨道列表的一个重复片段,允许以更紧凑的形式编写显示重复模式的大量列或行。

  1. <div id="container"
  2.   <div> 
  3.     This item is 50 pixels wide. 
  4.   </div> 
  5.   <div> 
  6.     Item with flexible width. 
  7.   </div> 
  8.   <div> 
  9.     This item is 50 pixels wide. 
  10.   </div> 
  11.   <div> 
  12.     Item with flexible width. 
  13.   </div> 
  14.   <div> 
  15.     Inflexible item of 100 pixels width. 
  16.   </div> 
  17. </div> 
  1. #container { 
  2.   display: grid; 
  3.   grid-template-columns: repeat(2, 50px 1fr) 100px; 
  4.   grid-gap: 5px; 
  5.   box-sizing: border-box; 
  6.   height: 200px; 
  7.   width: 100%; 
  8.   background-color: #8cffa0; 
  9.   padding: 10px; 
  10.  
  11. #container > div { 
  12.   background-color: #8ca0ff; 
  13.   padding: 5px; 

嵌套网格

我还可以将网格嵌套在另一个网格中, 来看看如何实现这一点:

  1. <div class="container"
  2.   <div class="item">One</div> 
  3.   <div class="item">Two</div> 
  4.   <div class="item">Three</div> 
  5.   <div class="item inner-grid"
  6.     <div class="item">i</div> 
  7.     <div class="item">ii</div> 
  8.     <div class="item">iii</div> 
  9.     <div class="item">iv</div> 
  10.     <div class="item">v</div> 
  11.     <div class="item">vi</div> 
  12.   </div> 
  13.   <div class="item">Five</div> 
  14.   <div class="item">Six</div> 
  15. </div> 

我们首先在外部container上声明网格:

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

注意,我们在网格模板中有一个repeat函数,并将其与一个minmax函数组合在一起。我们现在也可以将网格属性应用到内部网格。

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

这样,我们网格中嵌套了一个网格。

今天就跟大家分享到这里,感谢大家的观看,我们下期再见!

作者:Shadid Haque 译者:前端小智 来源:soshace

原文:https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

【编辑推荐】

  1. 工信部:已有1.6亿个终端连接到5G网络
  2. 有关链表的小技巧,我都给你总结好了
  3. CVE-2020-26896:闪电网络被曝安全漏洞
  4. 网络、用户、终端均初具规模 加速5G“转网”成运营商当务之急
  5. 机器学习在网络管理中有什么应用前景?
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

26人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

189人订阅学习

搭建数据中心实验Lab

搭建数据中心实验Lab

实验平台Datacenter
共5章 | ITGO(老曾)

118人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微