什么是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;