【CSS】grid布局

概念

又称网格布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。其子元素的float、display：inline-block、display：table-cell、vertical-align和column-*等设置都将失效。采用grid布局的元素，称为容器，其子元素称为项目。

与flex的区别

flex布局是轴线布局，是一维的。grid布局将容器分为行和列，是二维的。

容器属性

使用display：grid将元素变成grid容器。其拥有的属性如下：

• grid-template-rows：定义行数以及每行的行高
• grid-template-columns：定义列数以及每列的列宽　
• grid-template-areas:区域划分
• grid-auto-flow：row | column，项目放置顺序，默认row先行后列
• grid-row-gap：行间距
• grid-column-gap：列间距
• grid-gap：<grid-row-gap> <grid-column-gap>
• justify-items：start | end | center | stretch，项目水平放置位置（左中右）
• align-items：start | end | center | stretch，项目垂直放置位置（上中下）
• place-items：<align-items>  <justify-items>
•  
• justify-content：start | end | center | stretch | space-around | space-between | space-evenly，内容区域在容器里面的水平位置
• align-content：内容区域在容器里面的垂直位置
• place-content：<align-content> <justify-content>
• grid-auto-rows，外部网格的行高
• grid-auto-columns，外部网格的列宽

　　

grid-template-rows和grid-template-columns

.container {
    display: grid;

    // 具体数值
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;

    // 百分比
    grid-template-columns: 33.33% 33.33% 33.33%;

    // repeat函数，接收两个参数，参数一是重复次数，参数二是重复的值或重复的模式
    grid-template-columns: repeat(2, 100px 20px 80px);
    grid-template-columns: repeat(3, 33.33%);

    // auto-fill，自动填充容器
    grid-template-columns: repeat(auto-fill, 100px);

    // fr，表示比例管理
    grid-template-columns: 1fr 1fr;

    // minmax(a,b) 表示长度在[a,b]
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);

    // auto，浏览器自己决定长度
    grid-template-columns: 100px auto 100px;
}

使用方括号指定每一根网格线的名字

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

grid-template-areas

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

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

多个单元格合并成一个区域的写法如下。

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

如果某些区域不需要利用，则使用"点"（.）表示。　

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

区域的命名会影响到网格线。每个区域的起始网格线自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end

tip：

1. grid-template属性是grid-template-columns、grid-template-rows、grid-template-areas这三个属性的合并简写形式
2. 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
• justify-self：start | end | center | stretch
• align-self ：start | end | center | stretch
• place-self：<align-self> <justify-self>

参考

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