10分钟看懂CSS3Grid布局
时间：2023-03-31 11:23:24
CSS
基本介绍Grid作为前端的同学应该非常熟悉，翻译成中文就是“网格”，用过bootstrap、semanticui、antdesign的同学一定知道grid布局（deletegridLayout),以往css框架中的grid布局一般都是通过float和percentagewidth来实现的。这种实现有几个缺点：html不够简洁；需要清除浮动以避免高度崩溃；列数是固定的，不能灵活定义。比如bootstrap有12列，semanticui有16列，antdesign有24列。当然grid也可以用flex来实现，但是并不比用float简单多少，而且flex擅长一维空间的布局，不像grid那样擅长二维空间。现在css3从规范和标准层面实现了grid，编程体验大大提升！兼容性使用网格是一个二维网格系统，由多个列和行组成。1.Column(1)设置列CSS3中的Grid可以分为任意数量的列（columns），并且每列的宽度可以任意设置！我们先看一个简单的例子：1
2
3
4
5
6
7
8
9
css:body{color:#fff;文本对齐：居中；}#content{显示：网格；网格模板列：33.3%33.3%33.3%；最大宽度：960px；边距：0自动；}#contentdiv{背景：浅灰色；:30px;}#contentdiv:nth-child(even){background:skyblue;}效果：当我们设置display:grid和grid-template-columns:33.3%33.3%33.3%时，#content被分成了一个gridwith三行三列，此时#content称为gridcontainer，#content的子元素称为griditem。我们也可以任意改变列的数量和宽度，例如：#content{grid-template-columns:10%20%30%40%;}效果：(2)fr(fraction)css3中引入了一个新的单位fr（分数），中文意思是“分数”，用来代替百分比，因为百分比（小数）是不可分割的，用分数可以避免写多个小数。例如，具有三个等宽列的网格可以表示为：grid-template-columns:repeat(3,1fr);(3)repeat我们也可以使用repeat的方式来简化column或者row的写法。repeat方法接受两个参数，第一个参数表示重复的次数，第二个参数表示重复的内容。因此，三列等宽的网格也可以表示为：`grid-template-columns:``repeat``(``3``,``1``fr);`当我们有很多columnstodefine,repeat变得非常有用。例如，如果我们想定义一个10列等宽的网格，我们可以写repeat(10,1fr)而不是重复1fr10次。2.Row(1)设置行当我们设置列时，由于元素的换行，行会自动生成，但是我们仍然可以设置行的个数和行高。css:`#content{``display``:grid;``grid-template-columns:``repeat``(``3``,``1``fr);``grid-template-rows:``repeat``(``4``,``60px``);``max-width``:``960px``;``}`效果：可以看到第四行虽然没有内容,但是该行确实存在并占据了那个空间。(2)minmax在上面的例子中，我们给行指定了一个固定的高度，这就导致了一个问题：如果某个griditem中的内容很多，在固定高度的限制下，有些内容会显示不出来，如如下图所示：为了解决这个问题，css提供了minmax函数，可以让我们设置行的最小高度和最大高度。设置最大高度为auto后，行高可以自适应：css:`grid-auto-rows:minmax(``60px``,``auto``);``//或``grid-template-rows:``repeat``(``3``,minmax(``60px``,``auto``));`效果：(3)gridgap如果我们想在行与行之间添加间隔columns,还有一个现成的方法：css:`grid-gap:{``10px``;``}`效果：3.AboveGridLine在所有例子中，grid中的每个griditem都排列在默认顺序。如果我们想重新布局并更改网格项的位置或大小怎么办？为此，引入网格线的概念。所谓网格线，就是将网格分成若干等份的分界线。下图中横竖序号为1到8的线为网格线：`<``img``src="[http://lc-jOYHMCEn.cn-n1.lcfi...;/](http://lc-joyhmcen.cn-n1.lcfi...%3B/)>`通过定义griditem的开始我们可以通过处的gridline来控制griditem的位置和覆盖范围开始和结束。一个简单的例子：html:
1 