CSS Grid网格入门实例教程: 强大的动态布局

CSS Grid Layout 是一个二维布局，可以同时处理行和列上的布局。 像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。

基本示例

css grid 基本样式：

• display: grid/inline-grid 指定一个容器采用网格布局。grid表示这个网络窗口是一个块级元素
• grid-template-columns 属性定义每一列的列宽，可使用象素，也可以使用百分比。
• grid-template-rows 属性定义每一行的行高
• gap 属性是用来设置网格行与列之间的间隙（gutters），该属性是row-gap and column-gap的简写形式。
• repeat() 可简化重复的值。上面的代码用repeat()，如 grid-template-rows: 33.33% 33.33% 33.33%; 可简化为: grid-template-rows: repeat(3, 33.33%);

下述代表会产生一个2行3列的表格，可更改代码，失去焦点时生效。 效果：

auto

auto 关键字表示自适应宽度。 效果：

auto-fill

如果希望每一行（或每一列）容纳尽可能多的列或者行，可以使用auto-fill关键字 效果：

fr 片段分割

fr 是非常强大的比例分割属性，比如两个 grid-template-columns: 1fr 2fr 3fr; 将容器分成6份，分别占 1/6, 2/6, 3/6 效果：

grid-column / grid-row

grid-column 是 grid-column-start 和 grid-column-end 的合并简写
grid-row 是 grid-row-start 和 grid-row-end 的合并简写，格式如下：

  grid-column: start-line / end-line;
  grid-row: start-line / end-line;

grid-line 网格线从1开始，一个网格会有两条网络线，所以 grid-column: 1 / 3; 和 grid-row: 1 / 3; 分列代表这个单元格占两列两行。 效果：

grid-auto-flow

默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，grid-auto-flow: column，可以设置成先列后行： 效果：