Grid 网格布局知识详解

此文为个人理解文章笔记，详情请看 -> 阮一峰的Flex 布局教程：语法篇
w3school

前言

css 布局发展：table布局 -> div+css(float + position 方式布局) -> flexbox 弹性布局 -> gird 网格布局。Grid 网格布局是一个很强大布局方案。

Grid 网格布局是什么？

Grid 网格布局 是一个非常棒的布局解决方案，相比flex布局（一维布局，轴线布局），此为二维布局，适用于大规模的布局，只要布局比较规律，类似网格，就可以使用该布局方案。

兼容性

基本概念

Grid 网格布局 包含 容器(container) 和 项目(item)——这两个与flex 一样。容器中有两个方向（水平和垂直），即产生 行(row) 和 列(coloumn)，交叉区域为 单元格(cell)，划分网格的线叫做 网格线(grid line)，两平行的网格线之间形成 网格轨道(grid track)，四个网格线包围的封闭区间就是 网格区域(grid area)。

需要使用 网格布局的 div 上加上：

.grid {
    /*
    块级网格 | 行内网格 | 网格容器本身就是网格项
    */
    display: grid | inline-grid | subgrid;
    /* 设置相关配置 */
}

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

容器的属性（16）

grid-template-columns: <track-size>; /* 设置对应列的列宽，可以使用百分比\px\em\fr\auto，或者函数 repeat() maxmin() */
grid-template-rows: <track-size>;  /* 设置对应行的行高 */
grid-row-gap: ;  /* 行与行之间的间隙 */
grid-column-gap: ;  /* 列与列之间的间隙 */
grid-gap: <row-gap> <column-gap>;  /* 简写形式 */
grid-template-areas: 'a a a b b'
      'c c d . e'
      'c c d . e';  /* 给各个网格单元命名，就像给网格线命名一个道理。写法上类似于矩阵。 */
      /* 上面这个例子将网格分为a、b、c、d、e五个区域。如果某些区域不需要利用，则使用"点"（.）表示。 */
grid-auto-flow: ;  /**/
justify-items: start | end | center | stretch;  /* 项目的水平对齐方式 */
align-items: start | end | center | stretch;  /* 项目的竖直对齐方式 */
place-items: <align-items> <justify-items>;  /* 合并简写形式 */
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>;  /* 合并简写形式 */
grid-auto-columns: <track-size>;  /* 设置浏览器自动创建的多余网格的列宽, 如果不设置就浏览器自行决定 */
grid-auto-rows: <track-size>;  /* 设置浏览器自动创建的多余网格的行高 */
grid-template: <grid-template-rows> / <grid-template-columns> / grid-template-areas;  /* 合并写法 */
grid: <grid-template-rows> / <grid-template-columns> / <grid-template-areas> /<grid-auto-rows> / <grid-auto-columns> / <grid-auto-flow>;  /* 合并写法 */

函数&关键字&特殊说明

fr

fr 关键字（fraction 的缩写，意为“片段”）。
fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

grid-template-columns: 1fr 2fr; /* 2列，列宽比为 1 : 2 */

repeat()

repeat(times, mode)函数：简化重复的值, 接受两个参数，第一个为重复次数，第二个是所要重复的值。

grid-template-columns: repeat(3, 33.33%); /* 3列宽度都为 33.33% */
grid-template-columns: repeat(2, 100px 20px 80px); /* 共6列，列宽分别为 100px 20px 80px 100px 20px 80px */

minmax()

minmax(min, max) 函数: 得到一个长度范围，表示值在这个范围区间里面。

grid-template-columns: 1fr 1fr minmax(100px, 1fr); /* 在 100px ~ calc(100% - 100px) 之间 */

auto-fill

grid-template-columns: repeat(auto-fill, 100px); /* 单元格大小确定，容器大小不定时，通过 auto-fill 设置自动填充 */

还有一个 auto-fit，差不多，有区别。

auto

auto关键字表示由浏览器自己决定长度

grid-template-columns: 100px auto 100px;

网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1 first] 100px [c2] 100px [c3] auto [c4];  /* 3 列有 4 个网格线 */
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

项目的属性（10）

grid-column-start: <line-th> | <line-name> | span 2;  /* item 左边框所在的垂直网格线 */
grid-column-end: 1 | header-start;  /* item 右边框所在的垂直网格线 */
grid-row-start: span 2;  /* item 上边框所在的水平网格线 */
grid-row-end: span 2;  /* item 下边框所在的水平网格线 */

grid-column:  <start-line> / <end-line>;  /* grid-column-start 和 grid-column-end 的合并简写形式 */
grid-row:  <start-line> / <end-line>;  /* grid-row-start 属性和 grid-row-end 的合并简写形式 */
grid-area: <area-name> | `<row-start> / <column-start> / <row-end> / <column-end>`;  /* 指定项目放在哪一个区域, 也可作为 合并简写形式 */
justify-self: start | end | center | stretch;  /* 设置单元格内容的水平位置（左中右） */
align-self: start | end | center | stretch;  /* 设置单元格内容的垂直位置（上中下） */
place-self: <align-self> <justify-self>;  /* 合并简写形式 */

关键字

span

span 关键字，表示”跨越”，即左右边框（上下边框）之间跨越多少个网格。

grid-column-start: span 2; /* 项目左边框距离右边框 2 个网格 */

赏

谢谢你请我吃糖果

支付宝

微信