grid布局方式

参考博客 CSS Grid 网格布局教程 作者： 阮一峰

什么是Grid布局？

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，可以做出各种各样的布局。它与flex布局有些相似，但是flex只能针对轴线排列，是一维布局，而grid将容器划分为了行和列，是二维布局，简单的来说就是grid布局比flex布局牛逼太多。

先来看看grid布局有哪些属性

和flex一样，采用grid布局的元素称为’容器’，容器内部的子元素称为’项目’。

容器上的属性

• display: grid 指定一个容器采用网格布局
• grid-template-columns 定义每一列的列宽
• grid-template-rows 定义每一行的行高
  • repeat() 接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值
  • fr 关键字 如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
  • minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
  • auto 关键字 浏览器自动设置长度
• row-gap 设置行间距
• column-gap 设置列间距
• gap 间距的简写
• grid-template-areas 指定区域
• grid-auto-flow 默认是row先行后列，column是先列后行
• justify-items属性设置单元格内容的水平位置
• align-items属性设置单元格内容的垂直位置
• place-items属性是合并简写形式
• justify-content属性是整个内容区域在容器里面的水平位置
• align-content属性是整个内容区域在容器里面的垂直位置

项目上的属性

• grid-column-start属性：左边框所在的垂直网格线
• grid-column-end属性：右边框所在的垂直网格线
• grid-row-start属性：上边框所在的水平网格线
• grid-row-end属性：下边框所在的水平网格线
• grid-column属性是grid-column-start和grid-column-end的合并简写形式
• grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
• grid-area属性指定项目放在哪一个区域
• justify-self属性设置单元格内容的水平位置
• align-self属性设置单元格内容的垂直位置

下面逐个介绍各个属性的用法

容器属性

grid-template-columns 属性和grid-template-rows 属性

.box{
   	display: grid;
    grid-template-columns: 100px 200px 100px; //可以设置绝对单位
    grid-template-columns: 1fr 2fr 1fr; //fr关键字
    grid-template-columns: repeat(auto-fill, 100px); //auto-fill关键字，当容器宽度不知道时可以使用auto-fill让子元素先在同一行上排列，第一行排满后再换行
    grid-template-columns: 20% 60% 20%; //可以设置百分比
    grid-template-rows: repeat(3, 50px); //reapeat()函数
}

gap属性

gap属性是row-gap(行间距) 和 column-gap(列间距)的 简写形式

.box{
   	 display: grid;
   	 gap: 10px 20px;
}

grid-template-areas 属性

.box{
    display: grid;
    grid-template-areas: "header header header"
                        "main main side"
                        "footer footer footer"; 
}

grid-auto-flow 属性

.box{
    display: grid;
    grid-auto-flow: column; //先列后行
}

justify-items 属性，align-items 属性，place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下），place-items 属性是他们两个的简写属性。
属性值有
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

justify-content 属性，align-content 属性，place-content 属性

这些属性表示整个内容区域在容器里面的水平垂直位置
属性值有：
start
end
center
stretch
space-around每个项目两侧的间隔相等
space-between项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly;项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

项目属性

grid-column-start 属性(左)，grid-column-end 属性(右)，grid-row-start 属性(上)，grid-row-end 属性(下)

指定项目的四个边框

grid-area属性

grid-area: / / / ;
它可以作为合写属性指定边框

justify-self 属性，align-self 属性，place-self 属性

设置单元格内容的水平垂直位置
属性值start | end | center | stretch;