网格

@Grid

If it looks like a grid, then use CSS Grid.

概述 Overview

.更灵活：支持二维布局：对列和行进行布局

.类似早期的 table 布局；table 本来是做数据展示的，所以在布局上有明显的缺陷：非语义化、布局代码冗余，以及不好维护、渲染性能等问题，目前 table 布局已被抛弃

.更多网格布局实现，请访问 MDN - grid、如何用一行 CSS 实现 10 种现代布局、Isotope、Bootstrap

概念 Concept

容器 container

子项 item

单元格 cell

轨道 track

<div class="wrapper">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
</div>

.通过声明 grid 使得 .wrapper 成为一个 container；容器的直接后代|子元素 <div> 则变为 item

.wrapper {
    display: grid;
}

.通过划分列数 grid-template-columns 和行数 grid-template-rows，将容器 container 划分为一个一个格子 cell

.子项 item 就被放置这些格子中。每个格子被轨道 track 标记，行 row 从上到下为1，2，...；列 column 从左到右为1，2，...

网格轨道

F12查看

颜色随机

容器 Container

.如何划分行列？

.如何填充子项？

grid-template-columns

.容器列的划分；单位可以是绝对的或相对的；可以混合使用

grid-template-columns: px | % | fr | auto | repeat() | minmax() | max-content | min-content;

px：静态划分

grid-template-columns: 100px 200px 300px;

%：根据容器大小划分

grid-template-columns: 10% 70% 20%;

fr：根据份数划分；fraction，表示份数；容器整体被分隔成多少份，子项占的份数

grid-template-columns: 1fr 2rem 1fr;

grid-template-columns: 1fr 2fr 1fr;

auto：根据子项实际大小，占用空间，其它空间由划分的大小决定

grid-template-columns: auto 1fr auto;

grid-template-columns: 1fr auto 1fr;

grid-template-columns: 2rem auto 1fr;

repeat(n, length length)：根据指定大小 length，重复应用 n 次；可以指定多个 length

grid-template-columns: repeat(3, 1fr);

grid-template-columns: repeat(12, 1fr);

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

.如果想自适应划分，可以使用：auto-fill、auto-fit；其中，minmax()：格子最小和最大尺寸

.auto-fill：当容器有剩余闲置空间，生成空轨道；尽可能多地填充列，即使这些列是空的

grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));

auto-fill

.auto-fit：不会生成轨道，剩余空间被分配到各个子项中；根据实际内容调整列的数量和宽度，收缩多余的列

grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));

auto-fit

max-content

.列宽由最大宽度子项绝对 - maximal content contribution will be defined by the size of the largest sentence

.让列尽可能宽以适应最长的内容，保证内容不会被截断

min-content

.列宽由子项中的某个最大单词宽度决定 - minimal content contribution will be defined by the size of the largest word

.让列尽可能窄，仅适应最窄的内容，可能导致较多剩余空间；紧凑的列布局

grid-template-rows

.容器行的划分；含义同容器列的划分

.通常不需要单独指定，由内容撑开，按照子项

grid-template-rows: px | % | fr | auto | repeat() | minmax();

grid-template

.复合属性；同时设置列 grid-template-column、行 grid-template-rows，多见于页面整体布局，见后续案例

grid-auto-rows、grid-auto-columns

.轨道 track 的高度宽度，而不是子项的高度宽度

.当容器中没有明确指定行列大小时，由子项的尺寸决定容器的行高或列宽 - 隐式的指定行的高度|列的宽度

grid-auto-rows: <length> | <percentage> | min-content | max-content | auto;

grid-auto-columns: <length> | <percentage> | min-content | max-content | auto;

.指定大小后，默认情况下，子项会撑满，即：

align-items: strench;

.如果指定了其它属性，如 center，则根据子项高度，在轨道垂直方向上居中

align-items: center;

grid-auto-flow

.子项自动放置的顺序和方式 - 指定工作流的方向

grid-auto-flow: row | column | dense | row dense | column dense;

.默认是按行 row 的顺序填充|行优先；逐行填充来排列，在必要时增加新行

.dense 表示密集填充还是宽松填充

.特别适合处理动态内容，如数量或大小不一或未明确指定位置的网格项，如瀑布流 - Grid

.通常是划分好格子后再指定方向；如容器划分3行3列，10个子项的排列方式

默认 row 排列 - 划分列的行优先

column 排列 - 划分行的列优先

column 排列 - 未划分行的列优先

grid-template-areas

.按区域划分容器

.每个子项指定对应的区域 grid-area

.需配合 grid-template-columns 和 grid-template-rows 指定各区域大小，便于调整宽度和合并

.也可以由子项的跨行、跨列实现。见后续案例

justify-items、align-items、place-items

.子项在单元格的对齐：上中下

.默认水平垂直拉伸填满整个格子；对齐时，将使用子项的实际大小

.复合属性，同时指定 justify-items 和 align-items

默认拉伸填充

水平居中

垂直居中

justify-content、align-content、place-content

.格子如果没有占满容器，有剩余空间，还需要考虑子项在容器内的分布

.复合属性，同时指定 justify-content 和 align-content

默认开始 normal/start/flex-start

水平居中 center

水平结束 end/flex-end

items 和 content 互相对应；有对子项的操作，就有对网格区内容的操作

行 rows 和列 columns 对应；有行方向的控制，一定有对应的列方向的控制

justify-items 和 align-items 控制的是每个子项在其所在单元格内的对齐方式

justify-content 和 align-content 控制的是整个容器内子项的整体对齐方式

如果容器不指定高度、不指定行的划分，由子项撑开/占满，则很多容器属性都可以不考虑

gap

.单元格间距；非常好用

.row-gap：行间距

.column-gap：列间距

.容器大小包含了 gap 的尺寸

子项 Item

子项如果不显示的指定尺寸，默认自动拉伸占满整个单元格

子项的排列是一个一个，根据所占的空间进行排列

子项如果跨行或跨列，尽量明确指定行、列位置时，否则它会自动放置在下一个可用的单元格中，有可能跑到前面

使用 -1 表示结束行/列号

grid-column: span number (建议) grid-column: start/end grid-column-start、grid-column-end

.跨列；列的起始和结束 - specifies a grid item's size and location within a grid column by contributing a line, a span

.也可以根据轨道线简写为1/4，表示单元格跨度从 track 1到 track 4 - separated by /

grid-row: span number (建议) grid-row: start/end grid-row-start、grid-row-end

.跨行；行的起始和结束

.同样可以利用轨道线简写

Grid 布局引擎会尝试将这些子项放置在下一个可用的网格单元格；如果当前行没有足够的空间，子项将被放置在下一行的第一个可用单元格中

建议使用 grid-column/grid-row: span number 明确实现跨行跨列；避免漂移

尽量指定容器大小

尽量指定行划分

[] 跨行/跨列；完整实现请参考后续九宫格案例

九宫格

原始结构 - 5个子项

第1个子项跨列

.box div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
}

.box div:nth-child(1) {
    grid-column: 1/3;
}

.box div:nth-child(1) {
    grid-column: span 2;
}

第2个子项跨行 - 漂移

.box div:nth-child(2) {
    grid-row: 1/3;
}

应该同时指定列位置或扩展行

.box div:nth-child(2) {
    grid-row: 1/3;
    grid-column: 3/4;
}

.box div:nth-child(2) {
    grid-row: span 2;
}

grid-area

.通常配合 grid-template-areas 一起使用，指定划分的某一个区域

grid-area: area-name;

.也可以使用轨道指定；可以不使用定位就轻松将某些 cell 堆叠到一起；可以使用 z-index 调整前后顺序

grid-area: row-start / col-start / row-end / col-end;

justify-self、align-self、place-self

.设置自己的水平|垂直对齐方式

.place-self 复合属性；同时设置 justify-self 和 align-self

布局 Layout

说明

.布局元素只做布局的事情；元素内部的样式由元素完成

.通常不显式指定容器高度，而由子项撑开

[] 两列布局/左右布局

.aside {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
}

.配合 minmax() 函数动态调整侧边栏宽度

.aside {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
    gap: 1rem;
}

[] 三列布局/圣杯布局/双飞燕布局

.cup {
    display: grid;
    grid-template-columns: 8rem 1fr 4rem;
    gap: 1rem;
}

[] 等分/不等分布局

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1rem;
}

[] 栈布局/煎饼布局

.不划分列而划分行

.需要指定容器高度

.grid {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

[] 全站布局；更多案例请访问全站布局

.可以采用划分区域实现

.也可以使用跨列实现

.如果指定子项高度，当子项的内容超过子项大小时，默认情况仍然会撑开，并不能直接出现滚动条；解决的方案是为容器和子项都设置自动溢出

  .page {
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-rows: auto auto 1fr auto;
      grid-template-areas:
          'header header header'
          'nav nav nav'
          'aside article article'
          'footer footer footer';
      min-height: 100vh;
      gap: 1rem;
  }

  header {
      grid-area: header;
  }

  nav {
      grid-area: nav;
  }

  aside {
      grid-area: aside;
  }

  article {
      grid-area: article;
  }

  footer {
      grid-area: footer;
  }

案例 Cases

[] 九宫格、个人网站 - 相册

.sudoku {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

[] 异构布局、个人网站 - 事迹

.item:nth-child(1),
.item:nth-child(5) {
  grid-column: span 2
}

.item:nth-child(2),
.item:nth-child(3) {
  grid-row: span 2;
}

.使用轨道应显示指定、行列位置

.item:nth-child(1) {
  grid-column: 1/3;
}

.item:nth-child(2) {
  grid-column: 3/4;
  grid-row: 1/3;
}

.item:nth-child(3) {
  grid-row: 2/4;
}

.item:nth-child(5) {
  grid-column: 2/4;
}

[] 标签页/手风琴、多级菜单

使用过渡动画展开和折叠

使用鼠标单击事件切换动态类

结构：网格容器，如 wrap 有唯一子元素，如 ul，且子元素溢出隐藏；子元素可以有多个子元素，如 li

样式：高度从0份到1份

<div class="wrap">
  <ul>
    <li>Lorem.</li>
    <li>Sapiente.</li>
    <li>Placeat.</li>
    <li>Rem.</li>
    <li>Magnam.</li>
  </ul>
</div>

.wrap {
  display: grid;
  grid-template-rows: 0fr;//MUST be 0fr, NOT 0
  transition: .5s;
}

.wrap.active {
  grid-template-rows: 1fr;
}

.wrap ul {
  overflow: hidden;
}

[] 万能自适应布局/响应式布局 - 根据容器宽度和子项最小宽度自动决定分成几列；如果可以放下，就放下；否则将各子项缩放至填满整个容器

.ale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

对齐 Align

说明

.默认情况下

1. 容器会全部划分完，没有剩余空间

2. 仅仅指定列的划分，行的划分由子项换行决定

3. 不用显式设置子项大小，会自动水平和垂直拉伸 stretch 占满整个格子

如果存在以下情况，就需要解决：容器划分的格子和子项两者之间的对齐

1. 容器没有划分完

2. 子项的大小和划分的格子大小不匹配

.对齐区分是子项 items 对齐还是内容 content 对齐

[] 情况1：默认的对齐

.不指定容器高度：由子项撑开

.宽度上，全部划分完，且等分各列

.只需指定水平方向上的对齐；没有必要指定垂直方向的对齐

.除 stretch 外，其它对齐方式相当于为每个 item 指定 width 为 max-content，由其内容决定大小

.case0 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

justify-items: stretch start center end left[不推荐] right[不推荐]

你好

中国

通信大队

综合训练基地

特种作战学院

桂林学院

厦门工学院

广州工商学院

海口经济学院

[] 情况2：指定容器尺寸的对齐

.指定容器高度；可以指定垂直方向上的对齐

.容器高度由子项换行撑满

.没有显式指定子项高度

.case1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    height: 320px;
}

justify-items: stretch start center end left[不推荐] right[不推荐]

align-items: stretch start center end

你好

中国

通信大队

综合训练基地

特种作战学院

桂林学院

厦门工学院

广州工商学院

海口经济学院

[] 情况3：指定容器尺寸和单元格尺寸的对齐

.通常在容器有剩余空间的时候需要决定：各个子项放在容器哪个位置?

.case2 {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    grid-template-rows: repeat(3, 80px);
    gap: 10px;
    margin: 1rem auto;
    width: 100%;
    height: 320px;
    background-color: #eee;
}

justify-content: start center end space-around space-between

align-content: start center end space-around space-between

你好

中国

通信大队

综合训练基地

特种作战学院

桂林学院

厦门工学院

广州工商学院

海口经济学院

[] 子项对齐

.单独设置每个子项的对齐方式

.self {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 320px;
    height: 320px;
    margin: 1rem auto;
    background-color: #eee;
}

.self div:nth-child(1) {
    justify-self: start;
    align-self: start;
}

.self div:nth-child(2) {
    justify-self: center;
    align-self: start;
}

.self div:nth-child(3) {
    justify-self: end;
    align-self: start;
}

.self div:nth-child(4) {
    justify-self: start;
    align-self: center;
}

.self div:nth-child(5) {
    justify-self: center;
    align-self: center;
}

.self div:nth-child(6) {
    justify-self: end;
    align-self: center;
}

.self div:nth-child(7) {
    justify-self: start;
    align-self: end;
}

.self div:nth-child(8) {
    justify-self: center;
    align-self: end;
}

.self div:nth-child(9) {
    justify-self: end;
    align-self: end;
}

place-content：网格区域在容器里的位置

place-items：统一指定子项在单元格里的位置

place-self：单独设置某个子项在单元格里的位置

总结与作业 Summary & Homework

总结: .网格布局的特性和使用
作业: 尝试使用 float、position、flex 实现布局一节的内容，体会几种方式的区别

使用网格布局，优化个人网站，如：整体设计、导航设计等