Grid布局

2019-06-29 本文已影响0人 lyp82nkl

前言

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。

需要将容器元素定义为一个网格

display：grid

重要术语

Grid Container

设置了 display: gird 的元素。这是所有 grid item 的直接父项。在下面的例子中，.container 就是是 grid container。

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

Grid Item

Grid 容器的孩子（直接子元素）。下面的 .item 元素就是 grid item，但 .sub-item不是。

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid Line

这个分界线组成网格结构。它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一侧。下面例中的黄线就是一个列网格线。

Grid Track

两个相邻网格线之间的空间。你可以把它们想象成网格的列或行。下面是第二行和第三行网格线之间的网格轨道。

Grid Cell

两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个“单元”。下面是行网格线1和2之间以及列网格线2和3的网格单元。

Grid Area

四个网格线包围的总空间。网格区域可以由任意数量的网格单元组成。下面是行网格线1和3以及列网格线1和3之间的网格区域。

Grid 属性

gird-template-columns/grid-template-rows

.container {
  width: 400px;
  height: 300px;
  border: 1px solid red;
  
  display: grid;
  gird-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

还可以给网格线命名，一个网格线可以不止一个名字，如下第二个网格线有两个名字

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

另外重复的地方还可以用repeat()来简化

.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

上面等同于

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

"fr"允许将轨道大小设置为自由空间，如下则是将container除去50px后的空间分为1/3：

.container {
  grid-template-columns: 1fr 50px1fr 1fr;
}

grid-template-areas

通过grid-area属性来命名网格区域的名称

<grid-area-name> - 使用 grid-area 属性设置的网格区域的名称
.- 点号代表一个空网格单元
none - 没有定义网格区域

.container {
  width: 400px;
  height: 300px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 50px 50px auto 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . aside"
    "footer footer footer footer";
}
.header {
  grid-area: header;
  background: red;
}
.main {
  grid-area: main;
  background: blue;
}
.aside {
  grid-area: aside;
  background: yellow;
}
.footer {
  grid-area: footer;
  background: grey;
}

grid-template

在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。

.container {
  display: grid;
  
 /*  grid-template-columns: 50px 50px auto 50px;
  grid-template-rows: 50px auto 50px;
  grid-template-areas: 
    "header header header header"
    "main main . aside"
    "footer footer footer footer"; */
  grid-template: 
    "header header header header" 50px 
    "main main . aside" auto
    "footer footer footer footer" 50px
    / 50px 50px auto 50px;
}

grid-column-gap / grid-row-gap

设置行列的缝隙

  grid-column-gap: 10px;
  grid-row-gap: 15px;

justify-items / align-items / justify-content / align-content

用法和flex布局类似，暂不介绍

grid-auto-columns / grid-auto-rows

制定自动生成的轨道的大小

grid-auto-flow

如果你存在没有显示指明放置在网格上的 grid item，则自动放置算法会自动放置这些项目

grid

是所有的简写，和grid-template相似

grid-column / grid-row

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

栗子：

.container {
  width: 400px;
  height: 300px;
  border: 1px solid red;
  display: grid; 
  grid: 50px auto 50px / 10% auto 10%;
}
.header {
  grid-column: 1/ span 3;
  grid-row: 1;
  background: red;
}
.main {
  grid-column: 2;
  grid-row: 2;
  background: blue;
}
.aside {
  grid-column: 3;
  grid-row: 2;
  background: yellow;
}
.footer {
  grid-column: 1/ 4;
  grid-row: 3;
  background: grey;
}

grid-area

给 grid item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用

justify-self

沿着行轴对齐grid item 里的内容（与之对应的是 align-self, 即沿列轴对齐）

align-self

沿着列轴对齐grid item 里的内容（与之对应的是 justify-self, 即沿行轴对齐）
参考:若愚老师翻译CSS Grid 系列(上)、CSS Grid 系列(下)