本文参考资料：A Complete Guide to Grid

  • grid是一种二维空间布局，特别适合不规则布局。

    gird属性较多，这里只简要列举出一部分

一些基本概念

Grid容器（Grid Container）和Grid条目（Grid Item）

  1. <div class="container">
  2.   <div class="item item-1"></div>
  3.   <div class="item item-2"></div>
  4.   <div class="item item-3"></div>
  5. </div>

Grid内部

  • Grid线（Grid Line）
  • Grid元件（Grid Cell）
  • Gird轨迹（Grid Track）
  • Grid区域（Grid Area）

image.png

语法

指定container

  1. .container {
  2.   display: grid | inline-grid;
  3. }

设置每个行的高度/每列的宽度

  1. .container {
  2.   grid-template-columns: 40px 50px auto 50px 40px;
  3.   grid-template-rows: 25% 100px auto;
  4. }

效果如下：
image.png

还可以使用 fr “份儿”：

  1. .container {
  2.   grid-template-columns: 1fr 50px 1fr 1fr;
  3. }

定义一片区域

  1. .item-a {
  2.   grid-area: header;
  3. }
  4. .item-b {
  5.   grid-area: main;
  6. }
  7. .item-c {
  8.   grid-area: sidebar;
  9. }
  10. .item-d {
  11.   grid-area: footer;
  12. }
  14. .container {
  15.   display: grid;
  16.   grid-template-columns: 50px 50px 50px 50px;
  17.   grid-template-rows: auto;
  18.   grid-template-areas: 
  19.     "header header header header"
  20.     "main main . sidebar"
  21.     "footer footer footer footer";
  22. }

image.png

调整空隙

  1. .container {
  2.   grid-template-columns: 100px 50px 100px;
  3.   grid-template-rows: 80px auto 80px; 
  4.   grid-column-gap: 10px;
  5.   grid-row-gap: 15px;
  6. }

image.png

其他语法可以现用现学，参考本文开头处列出的网址。（有空我会翻译一份中文版）