10分钟看懂CSS3Grid
时间：2023-04-02 17:44:23
HTML
基本介绍上一篇我们介绍了CSS3flexbox，今天我们来说说CSS3的另一个强大功能：Grid。做Grid前端的同学应该不陌生。中文译为“格子”。用过bootstrap、semanticui、antdesign的同学一定知道gridlayout（删除网格布局）。以前CSS框架中的网格布局一般是通过float和百分比宽度来实现的。这种实现有几个缺点：HTML不够简洁；浮动需要清除，避免高度崩溃；列数是固定的，不能灵活定义。比如bootstrap有12列，semanticui有16列，antdesign有24列。当然grid也可以用flex来实现，但是并不比用float简单多少，而且flex擅长一维空间的布局，不像grid那样擅长二维空间。现在css3从规范和标准层面实现了grid，编程体验大大提升！兼容性使用网格是一个二维网格系统，由多个列和行组成。1.Column(1)设置列CSS3中的Grid可以分为任意数量的列（columns），并且每列的宽度可以任意设置！我们先看一个简单的例子：html:1
2
3
4
5
6
7
8
9
css:body{颜色：#fff;文本对齐：居中；}#content{显示：网格；网格模板列：33.3%33.3%33.3%；最大宽度：960px；边距：0自动；}#contentdiv{背景：浅灰色；padding:30px;}#contentdiv:nth-child(even){background:skyblue;}效果：当我们设置display:grid和grid-template-columns:33.3%33.3%33.3%时，#content被分割成了一个三行三列的网格。此时#content称为网格容器，#content的子元素称为网格项。我们也可以任意改变列的数量和宽度，例如：#content{grid-template-columns:10%20%30%40%;}效果：(2)fr(fraction)css3中引入了一个新的单位fr（分数），中文意思是“分数”，用来代替百分比，因为百分比（小数）是不可分割的，用分数可以避免写多个小数。例如，一个三列等宽的网格可以表示为：grid-template-columns:1fr1fr1fr;(3)repeat我们也可以使用repeat的方式来简化column或者row的写法。repeat方法接受两个参数，第一个参数表示重复的次数，第二个参数表示重复的内容。因此，三列等宽的网格也可以表示为：grid-template-columns:repeat(3,1fr);当我们有很多列要定义时，repeat就变得非常有用，比如我们要定义一个10列等宽的网格可以写成repeat(10,1fr)，而不是重复10次1fr。2.Row(1)设置行当我们设置列时，由于元素的换行，行会自动生成，但是我们仍然可以设置行的个数和行高。css：#content{显示：网格；网格模板列：重复（3、1fr）；网格模板行：重复（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,汽车））;效果：（3）网格间隙如果我们想在行列之间添加间隔，也有现成的方法：css:grid-gap:{10px;}效果：3.网格线在上面所有的例子中，每个网格中的网格项按默认顺序排列。如果我们想重新布局并更改网格项的位置或大小怎么办？为此，引入网格线的概念。所谓网格线，就是将网格等分的分割线。下图中横竖序号为1到8的线为网格线：
通过定义网格项的起始和结束网格线，我们可以控制网格项的位置和覆盖范围。一个简单的例子：html:
1 