轻松学习Grid

作者: 胡萝卜樱 | 来源:发表于2018-10-14 17:55 被阅读0次

轻松学习Grid
轻松上手Grid布局
Grid学习笔记
2018-03-16
Grid网格布局学习
Grid 学习笔记
学习 grid 布局
WPF布局缓冲颜色
css grid网格布局
CSS Grid 布局

用过bookstrap同学应该知道,下图中的布局如果用bootstrap那么我们需要为他分别指定删格

bootstrap:

<div class="row">
  <div class="col-xs-12 header">
    HEADER
  </div>
</div>
<div class="row">
  <div class="col-xs-4 menu">
    MENU
  </div>
  <div class="col-xs-8 content">
    CONTENT
  </div>
</div>
<div class="row">
  <div class="col-xs-12 footer">
    FOOTER
  </div>
</div>

但是如果换成使用grid布局，相同效果我们只需要做如下操作：
html:

<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>

css:

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px 100px 40px;
}
.header {
  grid-column: span 12;
}
.menu {
  grid-column: span 4;
}
.content {
  grid-column: span 8;
}
.footer {
  grid-column: span 12;
}

咦，是不是代码简化了很多，而且很清晰，那么就让我们来学习一波吧

首先

Gird是css中最强大的布局系统，应用于二维布局，可以同时处理行和列，可以通过将网格css规则应用于父元素（网格容器）和该元素的子元素（网格子项）来使用网格布局。定义一个grid布局很简单

display

.container {
  display: grid | inline-grid;
}

定义一个grid容器,为内容创建了一个新的grid环境

基本知识

这些基础知识是必须要掌握的，有了他们学习grid布局就不怕啦

1.网格容器(Grid Container): 元素使用了display: grid | inlie-grid; 是所有网格元素的直接父级
2.网格子项(Grid Item): 容器的直接子元素
3.网格线(Grid Line): 网格结构线。它们可以是垂直的（列网格线）或者水平的（行网格线），也可以在行或列的任一边。如下绿色的线为一个列网格线

4.网格轨迹(Grid Track): 两个相邻网格线之间的空间。可以将它们视为网格的列或行。这是第二行和第三行网格线之间的网格轨迹。

5.网格单元(Grid Cell): 两个相邻行和两个相邻列网格线之间的空间。它是网格的单个“单元”。这是行网格线1和2以及列网格线2和3之间的网格单元

6.网格区域(Grid Area): 网格区域是指 4 根网格线包围的空间，一个网格空间可能由任意数量的网格单元构成。下面的例子中网格区域是指在第 1 和 3 的行网格线和第 1 和 3 列网格线中间的位置

掌握了这些基础知识方便了我们对容器属性，和容器元素属性的理解，所有的属性都是基于这些来设置的。下面我们来分别看下网格容器的属性，和网格元素的属性

网格容器属性

grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows
grid-auto-flow

哇好多，是不是有点不想看了，不要急，下面我们来分下类哦

网格的行数列数，和内容所占区域
grid-template-columns
grid-template-rows
grid-template-areas
grid-template

网格线
grid-column-gap
grid-row-gap
grid-gap

网格元素的对齐方式
justify-items
align-items
place-items

网格容器的对齐方式
justify-content
align-content
place-content

网格轨迹
grid-auto-columns
grid-auto-rows
grid-auto-flow

分成五部分是不更清晰了
属性使用方法
我们在来看下网格子项的属性

网格子项属性

首先要知道，当设置 gird 布局之后，float，display: inline-block，display: table-cell，vertical-align和column-*属性对网格元素没有影响
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area

同样我们也会把属性分类，相比容器属性，有一些区别，
1.关于行数列数和区域的属性名缺少了template, areas的复数变单数area
2.对齐属性中items变成了self
3.缺少了对容器外部的对齐方式

所以只需要分为两类

网格的行数列数，和内容所占区域
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area

对齐方式
justify-self
align-self
place-self
属性使用方法

现在grid布局相关属性你都知道嘞，那么它的兼容性如何呢