CSS Grid布局

CSS Grid布局

基本概念

将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

与flex布局的区别

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局

容器属性

display

 display: grid; 			// 容器 为块级元素
 display: inline-grid; // 容器 为行内元素

注意： 设为网格布局后，子元素的float，display: inline-block，display: table-cell，vertical-align等设置都失效

---

grid-template-columns 、 grid-template-rows

               display: grid;
 grid-template-columns: 100px 100px 100px; // 3列，每列宽100px
    grid-template-rows: 100px 100px 100px;    // 3行，每行高100px

也可以使用百分比

 grid-template-columns: 33.33% 33.33% 33.33%;

repeat(n , v)

n：重复的次数
v：要重复的值

grid-template-columns: repeat(3, 33.33%);
// v也可以是一种模式
grid-template-columns: repeat(2, 100px 20px 80px);

auto-fill关键字

容器大小不确定，单元格大小固定，每一行想尽可能容纳多的单元格，超出换行，可使用该关键字，表示自动填充，

grid-template-columns: repeat(auto-fill, 100px);

fr关键字

fraction 的缩写，意为"片段"，用于表示比例关系

grid-template-columns: 1fr 1fr; 		  // 宽度相等的两列
grid-template-columns: 150px 1fr 2fr; // 第一列的宽度为150像素，第二列的宽度是第三列的一半
grid-template-columns: repeat(12, 1fr); // 十二网格布局

minmax(min, max)

长度范围

grid-template-columns: 1fr 1fr minmax(100px, 1fr); // 100px <= 第三列宽 <= 1fr

auto关键字

grid-template-columns: 100px auto 100px; // 第二列宽度自动填满

网格线名称

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
   grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

同一根线允许有多个名字 ，如[fifth-line row-5]

---

row-gap 、column-gap、gap

   row-gap: 20px;					// 行间距
column-gap: 20px;					// 列间距
       gap: 20px 20px;		// 行间距 列间距

---

grid-template-areas

用于定义 区域，一个区域可由单个或者多个单元格组成

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:  'a b c'
                      'd e f'
                      'g h i'; // 每个单元格定义一个区域

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c'; // 九个单元格分为三个区域

不需要定义的区域使用 点（.） 表示

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

区域的命名会影响到网格线的命名

区域名为a，起始位置的网格线叫做a-start，终止位置的网格线叫做a-end

---

grid-auto-flow

子元素摆放顺序，默认为row

row 先行后列
row dense 先行后列，并且尽可能紧密填满，尽量不出现空格
column 先列后行
column dense 先列后行，并且尽可能紧密填满，尽量不出现空格

grid-auto-flow: column; // 先列后行摆放子元素

---

justify-items、align-items、place-items

用于设置子元素在单元格内的位置

justify-items: start | end | center | stretch;	// 水平位置
  align-items: start | end | center | stretch;	// 垂直位置
	place-items: start end; // 垂直位置 水平位置

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

---

justify-content、align-content、place-content

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: start end; // 垂直位置 水平位置

• start：对齐容器的起始边框。
• end：对齐容器的结束边框。
• center：容器内部居中。
• stretch：项目大小没有指定时，拉伸占据整个网格容器。
• space-around： 每个项目两侧的间隔相等。
• space-between：项目与项目的间隔相等。
• space-evenly：项目与项目的间隔相等。

---

grid-auto-columns、grid-auto-rows

设置自动创建 多余 的列的宽度和 行的高度，写法与grid-template-columns一致

---

grid-template、grid

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

---

项目属性

grid-column-start、grid-column-end、grid-row-start、grid-row-end

• grid-column-start：左边框所在的垂直网格线
• grid-column-end：右边框所在的垂直网格线
• grid-row-start：上边框所在的水平网格线
• grid-row-end：下边框所在的水平网格线

span关键字

表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

grid-column-start: span 2;
	grid-column-end: span 2; // 与上行代码效果一致

grid-column、grid-row

grid-column: 1 / 3;
	 grid-row: 1 / 2;
/* 等同于 */
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
/* 等同于 */
grid-column: 1 / span 2;
grid-row: 1 / span 1;

grid-area

属性指定项目放在哪一个区域。

只作用于单个项目。

grid-area: e; // 位于e区域
// grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid-area: 1 / 1 / 3 / 3;

justify-self、align-self、place-self

justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
place-self: <align-self> <justify-self>;

place-：如果省略第二个值，属性会认为这两个值相等。