CSS Grid 网格布局教程

1、网格布局(Grid)是最强大的 CSS 布局方案。 的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。 GridFlex性，都可以 Flex 布局是轴线布局，只能指定项目针对轴线 的位置，可以看作是一维布局。Grid 布局则是将 容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。Grid 学习 Grid 布局之前，需要了解一些基本概念。2.1 容器和项目采用网格布局的区域，称为容器 (container)。 容器内部采用网格定位的子元素，称为项目(item)。上面代码中，最外层的元素就是容器，内层的 的子元素，比如上面代码的

2、元素就不是项目。 Grid生效。容容器里面的水平区域称为行 (row)，垂直区域 称为列 (column)。22.3 单元格行和列的交叉区域，称为单元格 (cell)。 划分网格的线，称为网格线 (grid line)。水平 网格线划分出行，垂直网格线划分出列。 根垂直网格线，比如三行就有四根水平网格线。 三、容器属性三、容器属性div 属性。这部分先介绍容器属性。33.1 display 属性div 上面代码指定上面代码指定注意，设为网格布局以后，容器子元素(项目)的float、display:是一个行内元素，该元素内部采grid-template-rows 属性容器指定了网格布局以后，接着

3、就要划分行和列。grid-template-rows属性定义每一行的行高。xpxgrid-template-columns 除了使用绝对单位，也可以使用百分比。(1 ) repeat() eat 例是 3)，第二个参数是所要重复的值。repeat()repeat()上面代码定义了6 列，第一列和第四列的宽度为(2 ) auto-fill 关键字 的单元格，这时可以使用auto-fill 关键字表示自动 (3) fr 关键字 (fraction 的缩写，意为片段)。如果两列的宽 面代码表示两个相同宽度的列。 (4) minmax()minmax()函数产生一个长度范围，表示长度就在这个 (5)

4、auto 关键字x (6)网格线的名称grid-template-columns属性和 grid-template-rows属性里面，还 autor上面代码指定网格布局为3 行 x 3 列，因此有 4 网格布局允许同一根线有多个名字，比如fifth-linerow-5。(7)布局实例grid-template-columns属性对于网页布局非常有用。两栏 传统的十二网格布局，写起来也很容易。grid-gap 属性grid-row-gap 属性设置行与行的间隔(行间距)， grid-column-gap属性设置列与列的间隔(列间距)。 CSS代码等同于下面的代码。 网格布局允许指定区域 (are

5、a)，一个区域由单grid-template-areasgrid-template-areasxpx上面代码先划分出 9 个单元格，然后将其定名为a 多个单元格合并成一个区域的写法如下。 . 格，或者该单元格不属于任何区域。线。每个区域的起始网格线，会自动命名headerheaderstart做header-end。3.5 grid-auto-flow 属性 置在每一个网格。默认的放置顺序是先行后列， 这个顺序由 grid-auto-flow属性决定，默认值是row，即 指定位置以后，剩下的项目怎么自动放置。grid-auto-flowgrid-auto-flow: row 现在修改设置，设为

6、row dense，表示先行后列，并 且尽可能紧密填满，尽量不出现空格。 上图会先填满第一列，再填满第上图会先填满第一列，再填满第2 列，所以 3 号 justify-items 属性，place-items 属性justify-items属性设置单元格内容的水平位置(左中 中下)。retchstretch：拉 属性的合justify-itemsjustify-content 属性，place-content 属性justify-contentjustify-contentalign-content的垂直位置(上中下)。的垂直位置(上中下)。justify-content: start | e

7、nd | center | stretch | space-around |eenspaceevenlyalign-content:align-content: start | end | center | stretch | space-around |eenspaceevenly(下面的图都以 属性为例，属性的图完全一样，只是将水平方向改成垂直方justify-content align-contentddnyy nteevenly grid-auto-rows 属性 比如网格只有 3 列，但是某一个项目指定在第5 大小，决定新增网格的列宽和行高。 xpx上面代码指定新增的行高统一为50p

8、x (原始的行高为 100px)。grid 属性grid-template属性是 grid-template-columns、grid-template-rows和 grid-template-areas这三个属性的合并简写形式。 这六个属性的合并简写形式。从易读易写的角度考虑，还是建议不要合并属性， 所以这里就不详细介绍这两个属性了。这些属性定义在项目上面。 框，分别定位在哪根网格线。 grid-column-start属性：左边框所在的垂直网格线 grid-column-end属性：右边框所在的垂直网格线 grid-row-start属性：上边框所在的水平网格线 grid-row-end属

9、性：下边框所在的水平网格线 格线，右边框是第四根垂直网格线。 根水平网格线，下边框是第二根水平网格线。 浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因 目的位置发生了怎样的变化。下面的例子是指定四个边框位置的效果。 这四个属性的值还可以使用span 关键字，表示跨越 ，即左右边框(上下边框)之间跨越多少个网格。 的重叠顺序。grid-row 属性grid-column属性是grid-column-start和grid-column-end 的合并简 grid-column: / ;grid-row: / ;上面代码中，项目item-1这

10、两个属性之中，也可以使用span 关键字，表示跨 mnidrow上面代码中，项目item-14.34.3 grid-area 属性grid-areagrid-areadareae gridrowendgridcolumnend写形式，直接指定 d一个例子。justify-self 属性，place-self 属性justify-self 属性设置单元格内容的水平位置(左中justify-items右)，跟 justify-itemsalign-selfalign-selfalign-itemsetch这两个属性都可以取下面四个值。r stretch：拉伸，占满单元格的整个宽度(默认值)。justify-self:justify-self: start.item-1 f性是place-selfalign-self ACompleteG