72 lines
2.9 KiB
Markdown
72 lines
2.9 KiB
Markdown
# grid
|
||
|
||
1. 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-line> 值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。
|
||
|
||
auto 指对网格布局不做干涉 自动布置 span 或者默认span的值为1
|
||
|
||
span 为网格单元定义一个跨度，定义项目跨多少个网格 1span 等于grid-auto-rows: 20px;属性定义的值 |