grid

grid 概念 grid --网格布局是css最强大的布局方案将网页划分成一个个网格，可以通过组合不同的网格从而实现各种各样的布局

2.应用 2-1 用前须知四个概念：

容器和项目我们把采取网格布局的整个区域称为容器容器中采用网格定位的子元素称为项目
行和列容器内水平方向叫行（row）垂直区域叫列（column）
单元格行和列的交叉区域称为“单元格”
网格线划分网格的线

2-2 使用中常用属性：

display:grid（块级元素）内联元素需要定义为display:inline-grid 定义任意元素为grid布局
grid-template-columns: 定义每一列的宽度一共多少列这个属性就有多少个值
grid-template-rows: 定义每一行的高度一共有多少行这个属性就有多少个值

|| 注使用须知设为网格布局以后，容器内子元素的float display:inline-block display:table-ceil verticle-align column-* 都会失效

grid-template-column 和 grid-template-rows的值可以使用绝对单位（px）也可以使用百分比有时候当列数很多每列宽度都一样时就需要写很多重复的值非常麻烦这时候可以用repeat()函数 repeat()接受两个参数第一个是重复的次数第二个是所要重复的值
对比demos 使用repeat之前：

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

使用repeat()之后

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

拓展延伸

auto-fill关键字：在单元格大小固定但是容器大小不固定的时候如果希望容器的每一行（或每一列）尽可能多的容纳单元格，可以使用auto-fill 用来表示自动填充(效果为超出容器宽度的时候项目换行排列)
fr单位为了表示比较关系网格布局提供了新的计量单位 fr(关键字) 如果两列的宽度分别为1fr 和 2fr 就表示后者是前者的两倍
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
grid-row 属性是一种 grid-row-start (en-US) 和 grid-row-end (en-US) 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。

如果指定了两个值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。

auto 指对网格布局不做干涉自动布置 span 或者默认span的值为1

span 为网格单元定义一个跨度，定义项目跨多少个网格 1span 等于grid-auto-rows: 20px;属性定义的值

2.9 KiB Raw Blame History Unescape Escape

grid

2.9 KiB

Raw Blame History