【CSS】Grid布局

Grid布局

定义

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

基本概念

容器和项目

• 容器：

  采用网格布局的区域。

• 项目：

  容器内部采用网格定位的子元素。

    <div class="grid-container"> /* 容器 */
        <div class="item item-1">1</div> /* 项目 */ 
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
    </div>

⚠️PS：

• 项目只能是容器的顶层子元素，不包含项目的子元素。
• Grid布局只对项目生效。

行和列

• 行（row）

  容器内的水平区域

• 列（columns）

  容器内的垂直区域

单元格（cell）

行和列的交叉区域

网格线（grid line）

划分网格的线。n行有n+1根水平网格线，m列有m+1根垂直网格线。

例如：

3*3的网格有4根水平网络线和4根垂直网格线。

容器属性

Grid布局的属性分为两种：容器属性和项目属性。顾名思义，定义在容器上的属性就是容器属性，而定义在项目上的属性就是项目属性了。

display属性

display: grid指定一个容器采用网格布局。

在默认情况下，容器元素都是块级元素。同时，没有设置列宽、行高，因此grid布局下情况如下：

[外链图片转存失败(img-g6xg5tz5-1562219664520)(https://s2.ax1x.com/2019/07/03/ZtNj39.png)]

若设置为行内元素display: inline-grid，则会在一行内显示：

[外链图片转存失败(img-pTmvAfa9-1562219664521)(https://s2.ax1x.com/2019/07/03/ZtaeG4.png)]

grid-template-columns属性、grid-template-rows 属性

容器制定了Grid布局后，接着就要划分行和列了。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

对容器添加属性：

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

可以看到，这里定义了三行三列，列宽和行高都是100px。

[外链图片转存失败(img-Fb5Sqbku-1562219664521)(https://s2.ax1x.com/2019/07/03/ZtdKfg.png)]

除此之外，还可以用百分比等单位定义。

repeat()

使用该函数，可以简化重复的值。该函数接受两个参数，第一个的参数是重复的次数，第二个参数是所要重复的值。

// example
grid-template-rows: repeat(3, 100px);
grid-template-rows: repeat(3, 33%);
grid-template-rows: repeat(3, 100px 50px 100px);

auto-fill关键字

表示自动填充，当容器还有剩余空间时，可以让容器容纳尽可能多的单元格。

// example
// 表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。
grid-template-columns: repeat(auto-fill, 100px);

fr关键字（fraction 的缩写，意为"片段"）

表示比例关系，例如：两列的宽度分别是1fr 2fr，就是后者是前者的两倍。

// example
// 表示两列的宽度一样
grid-template-columns: 1fr 1fr;

// 表示第一列的宽度是150px，第二列的宽度是第三列的一半。此处会将容器剩余空间分成3等份再按比列进行分割。
grid-template-columns: 150px 1fr 2fr;

minmax()

该函数产生一个长度范围，表示长度就在这个范围内。接受两个参数，分别是最大值和最小值。

// example
// 表示列宽最小100px，但不大于1pr
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

auto关键字

浏览器自己决定高度。

// example
// 第二列的宽度，基本上等于容器的最大宽度，除非单元格设置了最小宽度，且这个值大于最大宽度
grid-template-columns: 100px auto 100px;

网格线的名称

在grid-template-columns和grid-template-rows属性里，还可以用方括号指定每一根网格线的名称，方便之后引用，同时每个网格线还可以有多个名称。

// example
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-columns: [c1 item1] 100px [c2 item2] 100px [c3] auto [c4];

布局实例

grid-templa-columns非常实用，例如如果是两栏式布局，只需要一句代码就可以解决了。

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

传统的十二网格布局也十分容易。

grid-template-columns: repeat(12, 1fr);

row-gap属性、column-gap属性、gap属性

row-gap表示设置行间距，column-gap表示列间距；

gap是两者的合并缩写

grid-template-areas 属性

网格布局允许指定“区域”（area），一个区域由单个或多个单元格组成。该属性用于定义区域。

// example
.container {
  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';
}

上面代码划分了9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

若想将多个单元格合并为一个区域，可以这样：

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

实例：

grid-template-areas: 'header header header'
										 'main mian sidebar'
										 'footer footer footer'

这个实例的顶部是header，底部是footer，中间区域是main和sidebar部分。

如果某些区域不需要利用，则利用点‘.'表示。

⚠️PS：

区域的命名会影响网格线。每个区域的起始网格线会被命名为区域名-start，而终止的网格线叫做区域-end。

grid-auto-flow 属性

划分网格后，容器会按默认属性“先行后列”进行排放，而这个顺序的属性由grid-auto-flow决定，默认是row。

当属性值为column时，变成“先列后行”。

当属性值为row dense则表示“先行后列”，并且尽可能密集排列，不出现空格。

当属性值为column dense则表示“先列后行”，并且尽可能密集排列，不出现空格。

####justify-items 属性、align-items 属性、place-items 属性

justify-items设置单元格内容的水平位置；

align-items设置单元格内容的垂直位置；

place-items是前两者的合并缩写： ,若省略第一个值，则与第二个值相等。

// example
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

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

justify-content属性、align-content属性、place-content属性

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;  
}

这里属性的值域flex布局的属性意义类似。

grid-auto-columns、grid-auto-rows

假如现在网格的区域是3*3，而又有单元格被指定在这个区域的范围内，此时浏览器会自动生成多余的网格，以便放置项目。而这两个属性则是设置浏览器自动生成网格的行高和列宽，其属性值与grid-columns、grid-rows相似。若不指定这两个属性值，浏览器则根据单元格的内容大小来决定新增网格的行高和列宽。

.item {
 	// 用来指定位置
	grid-row-start: 4;
  grid-column-start: 2;
}

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属性：下边框所在的水平网格线

⚠️PS：

• 这四个属性值可以通过span关键字，表示“跨越”，既左右边框/上下网边框跨越多少个网格。
• 若网格项重叠，则通过z-index决定重叠顺序。

grid-column属性、grid-row属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

实例：

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.item-2 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-2 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

####grid-area属性

该属性用于指定项目放在哪一个区域。它既可以是指定一个区域，也可以是grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式。

实例：

.item-1 {
  grid-area: e;
  grid-area: 1 / 1 / 3 / 3;
}

justify-self属性、align-self属性、place-self属性

该属性与容器的同类属性（justtif-items、align-items、place-items）用法一致，只是它们作用于单个项目。

来源

1. CSS Grid 网格布局教程

   http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

2. Grid布局学习总结

   https://ruphi.cn/archives/315/

3. 写给自己看的display: grid布局教程

   https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/#grid-grid