CSS Grid布局指北

网格布局（Grid）是最强大的 CSS 布局方案。

以下是快速学习指南：

1. 基本概念

灵魂画作

属性分为了容器属性和项目属性
项目属性只是在容器的子元素上使用，并不是在后代都能用

2. 容器属性

.container {
  /* */
  /* display 分为行内和块 */
  display: grid;
  /* or */
  display: inline-grid;
  /* grid-template-columns, fr相当于等分比例 */
  grid-template-columns: 1fr 1fr 100px;
  grid-template-columns: 33% 33%;
  grid-template-columns: 100px 100px;
  grid-template-columns: repeat(3, 100px);
  grid-template-columns: repeat(2, 100px 20px);
  /* 数量不确定时，可以使用 */
  grid-template-columns: repeat(auto-fill, 100px);
  /* 表示一个范围 */
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
  /* 自适应 */
  grid-template-columns: 1fr auto 1fr;
  /* 网格线名称 */
  grid-template-columns: [c1] 100px [c2] 1fr [c3] auto [c4];
  /* grid-template-rows同理 */
  /* grid-row-gap行间距 */
  grid-row-gap: 20px;
  grid-column-gap: 30px;
  /* 相当于 */
  grid-gap: 20px 30px;
  /* grid-gap: 20px 相当于 grid-gap: 20px 20px */
  /* grid-template-areas */
  grid-template-areas: "header header header"
                       "main main sidebar"
                       "footer footer footer";
  /* 不需要某些区域，用'.'代替 */
  grid-template-areas: 'a . c'
                       'd . f'
                       'g . i';
  /* 区域不影响布局，区域两侧的网格线会自动命名为：区域名-start，区域名-end */
  /* grid-auto-flow 默认先行后列，默认值row */
  grid-auto-flow: row | column;
  grid-auto-flow: row dense | column dense;
  /* row dense 效果如图 */
  /* 水平方向内容位置，默认拉伸 */
  justify-items: start | end | center | stretch;
  /* 垂直方向内容位置，默认拉伸 */
  align-items: start | end | center | stretch;
  /* 合并简写为 */
  place-items: <align-items> <justify-items>;
  /* 水平方向整个内容位置，默认start，如下图 */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  /* 垂直方向整个内容位置，默认start */
  align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
  /* grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高，用法与grid-template-columns 和 grid-template-rows类似 */ 
  grid-auto-columns: 50px;
  grid-auto-rows: 50px;
  /* grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式 */
  grid-template: <grid-template-columns> <grid-template-rows> <grid-template-areas>;
  /* grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。 */
  grid: <grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>;
}

grid-row-gap

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

grid-auto-flow添加前

grid-auto-flow: row dense;添加后
justify-content

justify-content: stretch

justify-content: end

justify-content: space-around

justify-content: space-between

justify-content: space-evenly

3. 项目属性

.item {
  /* item占据了1到2列，2到3行 */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  /* 可以指定网格线名字 */
  grid-column-start: header-start;
  grid-column-end: header-end;
  /* span关键字 表示跨越，span 2跨域2个网格 */
  grid-column-start: span 2;
  /* 简写成,注意有斜杠 */
  grid-column: <grid-column-start> / <grid-column-end>;
  grid-row: <grid-row-start> / <grid-row-end>;
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
  /* grid-area属性也可以指定项目放在哪一个区域。 */
  grid-area: d;
  /* 单独设置该项目的内容水平/垂直位置，跟 justify-items / align-items 用法一样 */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: <justify-self> <align-self>;
}

完事

最后编辑于：2019.10.29 11:40:20