HTML+CSS06 Grid布局

与Flex的比较

Flexbox是一维布局系统，适合做局部布局，比如导航栏组件。Grid是二维布局系统，通常用于整个页面的规划。

二者从应用场景来说并不冲突。虽然Flexbox也可以用于大的页面布局，但是没有Grid强大和灵活。二者结合使用更加轻松。

兼容性

兼容性并不乐观，虽然至2017年3月，许多浏览器都提供了对 CSS Grid 的原生支持，但是都体现在比较新版本上：

基本概念

Grid容器里面，水平区域成为行，垂直区域称为列，行和列的交叉区域成为单元格（cell）。正常情况下n行m列会产生n x m个单元格。

划分网格的线就成为网格线，n行有n+1根水平网格线，m列有m+1根垂直网格线

一个4x4的网格，共有5根水平网格线和5根垂直网格线

容器属性

改变容器

使用display: grid指定容器采用网格布局（或者使用display: linline-grid指定容器采用行内网格布局）。

设为网格布局后，容器子元素的float、display: inline-block、display: tabel-cell、vertical-align和column-*设置都会失效

划分网格

容器指定了网格布局后需要划分行和列：

• grid-template-columns属性定义每一列的列宽
• grid-template-rows属性定义每一行的行高

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

上面的代码将容器划分为三行散列的网格，列宽和行高都是100px

fr关键字

划分网格的宽度单位除了是px、百分比等常规单位之外，也可以使用fr关键字，如果两列的宽度是1fr和2fr，那么代码后者的宽度是前者的两倍

如果同时使用px和fr时，使用fr的宽度会将剩余的宽度都充满

repeat函数

可以使用repeat函数来书写重复的值，它接受两个参数，第一个是重复的次数，第二个是重复的值

.container {
  grid-template-columns: repeat(2, 100px 20px 80px);
  /* 等于 grid-template-columns: 100px 20px 80px 100px 20px 80px */
}

auto-fill关键字

在使用repeat函数时，可以使用auto-fill关键字，表明在容器大小不确定时，希望每一行或者每一列容纳尽可能多的单元格

.container {
  grid-template-columns: repeat(auto-fill, 10