一、概述

上面的效果，就是Grid布局的拿手好戏。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

二、基本概念

学习 Grid 布局之前，需要了解一些基本概念。

2.1 容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代码中，最外层的

元素就是容器，内层的三个

元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的

元素就不是项目。Grid 布局只对项目生效。

容器使用ddisplay: grid; 指定布局。

接着就应该划分行和列，grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。


.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

若数值相同，可使用repeat关键字

grid-template-rows: repeat(3, 100px);

单元格宽度固定，若容器宽度不固定，让其自适应可使用auto-fill关键字。

grid-template-rows: repeat(auto-fill, 100px);

使用fr关键字，按相对比例拆分。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; // 两个容器宽度相等
  grid-template-columns: 1fr 2fr; // 后者是前者的两倍宽度
}

设置行列间距


grid-row-gap: 20px;
  grid-column-gap: 20px;

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

grid-template-areas 属性指定区域，实现非顺序容器布局。

.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: 'a a a'
                     'b b b'
                     'c c c';

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

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

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

grid-auto-flow: column; 行列转置

未完待续

Grid布局

vaakian / vaakian.github.io

CSS之Grid布局 #11

一、概述

二、基本概念

2.1 容器和项目