grid

最近在网上看了Grid的入门基础， 做一下笔记自己记录下。

前面的话

---

有了 grid 以后可以更简单的完成复杂页面的二维布局。 而不需要去抠1px的margin、padding，而头痛许久。

本文通过几个小例子进行演示

创建HTML结构

---

首选创建一个class为box的div 里面有9个class为content的子div; 友好的是grid依然可以配置flex使用; 我们为.contet的写上一些样式; 代码如下

HTML 代码:

    <div class="box">
      <div class="content">1</div>
      <div class="content">2</div>
      <div class="content">3</div>
      <div class="content">4</div>
      <div class="content">5</div>
      <div class="content">6</div>
      <div class="content">7</div>
      <div class="content">8</div>
      <div class="content">9</div>
    </div>

CSS 代码:

    * {
        margin: 0;
        padding: 0;
    }
    .content {
        display: flex;
        justify-content: center;
        align-items: center;
        background: blue;
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        border: 1px solid red;
      }       

此时在浏览器中打开页面, 正常的盒子形状从上向下排列; 显示为下图:

浏览器中的图片

grid 出场 (定义grid)

---

下面有请我们的主角 Grid 出场。 使用方式为display: grid;在看我们的css代码:

CSS 代码:

  .box {
    display: grid;
    /* display: inline-grid; 行内元素的grid 不接受定义宽高 */
  }

小伙伴 grid-template-columns 和 grid-template-rows (构建行与列)

---

此时页面并没有什么变化, grid 需要一些小伙伴来配置它. 见下表:

代码	功能	单位	简写
grid-template	定义列 与 行的数量及之间的比例关系	px dr auto em 非负值	grid-template: grid-template-columns / grid-template-rows;
grid-template-columns	确认有几列及列于列之间的大小比例	px dr auto em 非负值	--
grid-template-rows	确认有几行及行与行之间的大小关系	px dr auto em 非负值	--

注解: fr 单位(等分); fr 是为网格布局定义的一个新单位。它可以帮助你摆脱计算百分比，并将可用空间(父元素的高与宽)等分。

我们小伙伴加入代码中在看一下效果

  .box {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 200px 200px 200px;
    /* 简写为 */
    /* grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;*/
  }

上面的代码表示我们将让页面构成, 3行, 3列的九宫格布局; 每一格的宽度为 300px 高为200px; 如下图:

九宫格

我们也可以使用新的单位 dr, 我们来改一下代码:

  .box {
    display: grid;
    /* 将宽高设置300px */
    width: 300px;
    height: 300px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
 
/* 当我们有很多fr要写的时候手写代码会比较麻烦
   因此可以使用`repeat()` 函数
   它接收两个参数 1. 要拷贝的次数 2. 要拷贝的内容  代码如下:
*/
 
  / *
    grid-template-rows: repeat(3, 1fr);
   */
  }
 

修改代码以后的页面, 可以看得出来, 子div的宽高都变为了平均的100px; 效果如下图:

image

小伙伴 grid-gap (区域之间的距离)

---

grid-gap 它的主要功能是记录区域与区域之间的间距

代码	功能	参数	简写
grid-gap	只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距。	px fr % em 非负值	grid-gap: grid-row-gap grid-column-gap;
grid-row-gap	创建行与行之间的间距	px fr % em 非负值	--
grid-column-gap	创建列与列之间的间距	px fr % em 非负值	--

我们来修改下代码:

CSS 代码:

  .box {
    display: grid;
    width: 300px;
    height: 300px;
    /* 给父div加上背景色 */
    background: #09c;
    /* 让父div居中 */
    margin: 30px auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* 使每个子div之间的间距为10px 但是与父元素的边缘没有间距 */
    grid-gap: 10px;
  }

加入 grid-gap:10px后, 子div之间有了10px的间距, 可以看到父元素的背景色, 效果如下图:

效果图:

image

小伙伴 grid-area 等 (位置变化)

---

在flex 布局方法中设计到一些元素的位置变化像order属性它的值越小越靠前显示, 在grid中也有提供这种位置变化, 而且它使用起来更加方便, 首先我们来介绍几个小伙伴:

代码	功能	参数	简写
grid-row-start	移动后的位置开始的行数	Number	---
grid-row-end	移动后的位置结束的行数	Number	---
grid-row	移动后所在行的位置	Number	grid-row:grid-row-start / grid-row-end;
grid-column-start	移动后的位置开始的列数	Number	---
grid-column-end	移动后的位置结束的列数	Number	---
grid-column	移动后所在列的位置	Number	grid-row:grid-row-start / grid-row-end;
grid-area	移动位置的简写	Number	grid-area:row-start/column-start/row-end/column-end;

首先需要理解 grid 行与列之间的关系 它就像笛卡尔坐标系从左上角开始以此向右边和下边延伸, 每一行或每一列就是一个坐标系, 但是它的原点值是从1开始的; 如下图:

image

当明白了 grid 中这么一个"坐标系"以后就可以尝试着移动子元素的位置, 下面的代码将内容是6的子div移动至内容是2的位置; 看代码:

CSS 代码:

  /* 寻找到要移动的div */
  .content:nth-child(6) {   
    /*
    要移动值 区域 2 的位置, 从上面的"坐标系"的图可以清楚看到以后的位置的
    行的开始数为1 , 结束位置为 2;
    列的开始位置为 2, 结束的位置为3;
    */
    grid-row-start: 1;
    grid-row-end: 2;
    /* 简写为 */
    /*grid-row: 1/2;*/
 
    grid-column-start: 2;
    grid-column-end: 3;
 
    /* 简写为 */
    /*grid-column: 2/3;*/
 
    /* 超级简写 */
    /*grid-area: 1/2/2/3;*/
  }

效果图:

image

grid 在移动位置的同时可以改变原来我们定义好的比例值, 代码示例:

CSS 代码:

/*我们将上面的css代码修改为如下*/
.content:nth-child(6) { 
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 4; /* 我们让6号div移动后的位置在第四列结束 */
 
  /* 也可写做下面的情况 */
 
  /* grid-column-end: span 2; */
 
   /* 可以理解为从移动后的位置占用几个"坐标单位", 当值大于我们在 `grid-template` 中定义的行数 或者 列数时, `grid` 会按照你从新定义的数去从新分配行数或列数 */
}
 

当我们改变了移动后的结束值时, 也就是此时6号div 在列的"坐标轴"相当于是占用了两个单位的宽度, 在chrome审查元素模式下,看起来很明显, 6号占了两个小方块的位置; 效果如下图:

效果图:

image

grid-template-areas 命名法布局

---

grid 还为我们提供了一种更加直观的布局方式, 我们可以通过在子元素中定义属性grid-area 给当前子元素的位置定义一个名字, 在父元素的属性grid-area中按照名称的排列来实现布局: 请看下面的代码演示

HTML 代码:

<!-- 这是一个很常见的布局 -->
<div class="wrap">
  <header class="header textStyle">header</header>
  <aside class="aside textStyle">aside</aside>
  <main class="main textStyle">main</main>
  <footer class="footer textStyle">footer</footer>
</div>
 

CSS 代码:

  * {
    margin: 0;
    padding: 0;
  }
 
  .textStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
  }
 
 
  .wrap {
    display: grid;
    width: 100%;
    height: 500px;
    margin: 20px auto;
    background: #eee;
    /* 需要三行 两列的布局 */
    grid-template: 1fr 5fr 1fr/ 1fr 3fr;
    grid-gap: 10px;
    /* 三行两列 这样写很直观 */
    grid-template-areas: "header-area header-area"
               "aside-area main-area"
               "footer-area footer-area";
  }
 
  .header {
    grid-area: header-area; /* 定义名称 */
    background: #60D194;
  }
 
  .aside {
    grid-area: aside-area;
    background: green;
  }
 
  .main {
    grid-area: main-area;
    background: #09c;
  }
 
  .footer {
    grid-area: footer-area;
    background: blue;
  }
 

效果图:

image

参考文献

---

参考自以下文章:
https://zhuanlan.zhihu.com/p/26757425?group_id=844328463711240192
https://www.w3cplus.com/css/learncssgrid.html