专栏首页林澈思的茶CSS Grid网格布局实例教程

CSS Grid网格布局实例教程

针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。虽然这些年 js 发展的势头正劲,盖过了 css 的发展风头,但是 css 也是有很大进步的。弹性布局、网格布局相继被各大主流浏览器支持,大大方便了我们切图仔,再也不需要用 bootstrap 的栅格系统了,网格布局原生支持!不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,是一个基于网格的二维布局系统,目的是用来优化用户界面设计。可以说网格布局(Grid)是最强大的 CSS 布局方案。

Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。

基本概念

学习 Grid 布局之前,需要了解一些基本概念。

容器和项目

采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。

例子:

1 2 3 4 5

<div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> </div>

上面代码中,最外层的<div>元素就是容器,内层的三个<div>元素就是项目。

注意:项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。

行和列

容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。

上图中,水平的深色区域就是"行",垂直的深色区域就是"列"。

单元格

行和列的交叉区域,称为"单元格"(cell)。

正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格。

网格线

划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。

正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。

上图是一个 4 x 4 的网格,共有5根水平网格线和5根垂直网格线。

容器属性

Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。

容器属性必须设置在容器上。

设置容器为行性质或内联性质的网格布局:

1 2

display: grid; display: inline-grid;

设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

1 2 3 4 5 6 7

grid-template-columns: 100px 100px 100px; // 将容器设为三列,每列的列宽为100px grid-template-rows: 100px 100px 100px; // 将容器设为三行,每列的行高为100px grid-template-areas: 'a a a' 'b b b' 'c c c'; // 定义区域名,由单个或多个单元格组成 grid-template // 上面三个属性的合并简写形式,不易读易写,不建议使用 grid // 多属性合并,不易读易写,不建议使用

注意,区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end。 比如,区域名为header,则起始位置的水平网格线和垂直网格线叫做header-start,终止位置的水平网格线和垂直网格线叫做header-end。

设置项目之间的间隔

1 2 3

grid-row-gap: 20px; // 设置行与行的间隔 grid-column-gap: 20px; // 设置列与列的间隔 grid-gap: <grid-row-gap> <grid-column-gap>; // grid-column-gap和grid-row-gap的合并简写形式,也可直径写做 gap

整个内容区域在容器里面的水平/垂直位置

1 2 3

justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; place-content: <align-content> <justify-content>; // align-content属性和justify-content属性的合并简写形式

项目内容在单元格中的水平/垂直位置

1 2 3

justify-items: start | end | center | stretch; align-items: start | end | center | stretch; place-items: start | end | center | stretch;

repeat() / minmax()函数 和 auto-fill/auto/fr关键字

1 2 3 4 5 6 7

grid-template-columns: repeat(3, 100px); // 3列, 每列100px grid-template-columns: repeat(auto-fill, 100px); // 自适应列数, 每列100px grid-template-columns: repeat(3, 1fr); // 3列,每列等宽 grid-template-columns: 100px 1fr 2fr; // 第一列100px,剩余空间 1 : 2 分配给第二第三列 grid-template-columns: 100px auto; // 第一列100px,第二列自适应剩余空间 grid-template-columns: 1fr 1fr minmax(200px, 2fr); // 前两列 1 等宽 ,最后一列最小 200px ,正常情况下是前一列的 2 倍 grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // [c1] 为网格线名

有时候,一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。

1 2 3

grid-auto-columns: 50px 50px 50px; // 超出所定义网格行的列宽 grid-auto-rows: 50px 50px 50px; // 超出所定义网格行的行高 grid-auto-flow // 容器的子元素会排列顺序: row"先行后列"、 column"先列后行"、 row dense 和 column dense

项目属性

项目属性必须设置在项目上。

项目的位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪根网格线。

1 2 3 4 5 6 7

grid-column-start: 1; // 左边框所在的垂直网格线 grid-column-end: 2; // 右边框所在的垂直网格线 grid-row-start: 1; // 上边框所在的水平网格线 grid-row-end: 2; // 下边框所在的水平网格线 grid-column: 1 / 2; // grid-column-start和grid-column-end的合并简写形式 也可以结合网格线和span关键字 grid-row:1 / 2; // grid-row-start属性和grid-row-end的合并简写形式 也可以结合网格线和span关键字 grid-area: a // 指定项目放在哪一个区域  由容器上的grid-template-area划分区域

1 2 3

justify-self: start | end | center | stretch; // 设置单元格内容的水平位置 align-self: start | end | center | stretch; // 设置单元格内容的垂直位置 place-self: <align-self> <justify-self>; // align-self属性和justify-self属性的合并简写形式

布局实例

两栏布局

一侧固定,一侧自适应

关键代码:

1 2 3 4 5 6 7 8 9 10 11

<style> .container{ display: grid; grid-template-columns: 100px auto; /* 或者 100px 1fr */ height: 200px; } </style> <div class="container"> <aside></aside> <main></main> </div>

效果展示:

十二网格布局

关键代码:

1 2 3 4 5 6 7 8 9 10 11

<style> .container{ display: grid; grid-template-columns: repeat(12, 1fr); text-align: center; } </style> <div class="container"> <div>1</div> . . . </div>

效果展示:

水平垂直居中

目前 grid 布局是唯一一个一行 css 代码实现水平垂直居中布局的方法

关键代码:

1 2 3 4 5 6 7 8 9

<style> .container{ display: grid; place-content: center; } </style> <div class="container"> <div>码云笔记 mybj123.com</div> </div>

效果展示:

自适应两端对齐

这种效果难在实现最后一行左对齐的效果。如果使用 flex 布局或者 text-align: justify (参考此处)方法,则需要使用等列的空标签占位,而如果不确定总共有多少列的话则难以实现最后一行左对齐的效果。而 grid 布局则可完美实现两端对齐最后一行左对齐的效果。

项目宽度固定:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<style> .container{ display: grid; grid-template-columns: repeat(auto-fill, 100px); justify-content: space-between; gap: 30px; } .item{ width: 100px; height: 100px; font-size: 4em; text-align: center; border: 1px solid blueviolet; } </style> <div class="container"> <div class="item">1</div> . . . </div>

效果展示:

项目宽度不固定:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<style> .container{ display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); grid-auto-rows: minmax(100px,auto); gap: 30px; } .item{ border: 1px solid #8A2BE2;} </style> <div class="container"> <div class="item">1</div> . . . </div>

效果展示:

限定列宽的表格

第三列正常是前两列之和,最小是 200px :

1 2 3 4 5 6 7 8 9 10 11 12 13

<style> .container{ display: grid; grid-template-columns: 1fr 1fr minmax(200px, 2fr); } .container div{ border: 1px solid #8A2BE2;} </style> <div class="container"> <div>1</div> . . . </div>

效果展示:

圣杯布局

自适应移动端的圣杯布局

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<style> .container{ display: grid; grid-template-columns: 150px auto 150px; grid-gap: 1em; } header,footer{ grid-column: 1 / 4; } header,aside,article,footer{ background: #eaeaea;    display: grid; place-content: center; height: 17vh; } @media all and (max-width: 700px;) { aside,article{ grid-column: 1 / 4; } } </style> <div class="container"> <header>Header</header> <aside>Left Sidebar</aside> <article>Article</article> <aside>Rite Sidebar</aside> <footer>Footer</footer> </div>

效果展示:

基于网格线布局

基于网格线数字编号安放项目,推荐阅读我之前写过的一篇文章《3种方案实现跨行或跨列布局

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<style> .container{ display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px; } .box{ padding: 20px; border-radius: 5px; background: brown; color: #fff;    font-size: 150%; } .a{ grid-column: 1 / 3; grid-row: 1; } .b{ grid-column:  3; grid-row: 1 / 3; } .c{ grid-column: 1; grid-row: 2; } .d{ grid-column: 2; grid-row: 2; } </style> <div class="container"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> </div>

效果展示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3 box-shadow属性设置阴影效果用法大全

    CSS3 box-shadow 属性用来向边框添加一个或多个阴影效果,该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 ins...

    赵帆同学GXUZF.COM
  • 一种实用的 cmd 字体

    最近由于某些原因 (戴尔全家桶和家庭版) 和我实在贫穷不能重买解决100%的问题,所以我选择了重装系统。

    赵帆同学GXUZF.COM
  • C#窗体程序:设计一个配置选择器,输出电脑选择配置

    赵帆同学GXUZF.COM
  • 前端|Grid实现自适应九宫格布局

    现在无论是做app还是做网站,宫格的布局也是必然存在的,那么如何使用css实现自适应的九宫格布局呢?下面简单来介绍一下css里面的grid实现九宫格布局。

    算法与编程之美
  • 使用网络构建复杂布局超实用的技巧,赶紧收藏吧!

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

    前端小智@大迁世界
  • GRID布局

    目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一...

    WindrunnerMax
  • 使用HTML5+CSS3绘制HTML5的logo

    王凡汎
  • 分分钟学会CSS Grid布局

    Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。 CSS Grid 今年也获得了主流浏览器(Safari,Chrome,...

    Javanx
  • CSS样式更改——多列、元素是否可见、图片透明度

    上篇文章主要讲述了CSS样式更改中的过渡、动画基础知识,这篇文章我们来介绍下CSS样式更改中多列、元素是否可见、图片透明度知识。。

    前端皮皮
  • 机器之心年度盘点:2017年人工智能领域度备受关注的科研成果

    机器之心原创 参与:李泽南、李亚洲、黄小天 2016 年,人工智能行业经历了语音识别准确率飙升、神经机器翻译重大突破、图像风格迁移的兴盛。2017 年,人们对于...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券