Grid布局系统学习笔记

grid的布局核心原理就是将container分割为多个area，将子元素放置在一个或多个area内

grid-template-columns/rows

这两个属性用来定义每一列/行的距离

下面使用该属性定义一个九宫格布局

.box{
    width: 450px;
    height: 450px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

对于规律性比较强的布局可以使用repeat简化代码

repeat(3, 1fr);

布局效果如图

结合grid-column/row-start/end定义子元素位置

该属性可以接受number或者name定义子元素的位置

首先看一下使用nubmer

.item1{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
}
.item2{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
}
.item3{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
}

效果如下

name的使用方式基本相同，只要在定义grid-template-columns/rows是加入name即可

grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];

可以使用grid-column/row简写属性名，前面的代码修改如下

.item1{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
}

使用grid-template-areas为area命名

使用grid-template-areas实现一个常见的布局

grid-template-areas: 
    "aside header header"
    "aside content content"
    "aside footer footer";

在子元素上使用grid-area选择位置

.item1{
    grid-area: aside;
    background-color: green;
}

效果如下

使用gap设置间距

在一个简单的四格布局下使用gap

gap: 10px 10px;

效果如下

tip：gap属性是grid-column-gap 和 grid-row-gap的缩写

指定网格的放置方式

该属性涉及justify-items 和 align-items，值和flex布局一样，不过区别是在grid有剩余空间的情况下指定网格的放置方式

常用属性就是stratch start center这些，详细可查询MDN

指定网格内元素的放置方式

place-content（justify-content 和 align-content）用于指定元素的放置方式，常用值和justify-items相同

如果需要指定单一元素的位置可以在该元素上使用place-self（justify-self 和 align-self），使用方式同上