栅格布局通过 . 来实现占位

# 栅格布局

开始第一篇文章, 不用在意什么网速啊, 以后资源会不会不在啊, 以及搭建到自己服务器, 等等, 想那么多干什么, 还不如认真的用来写点有用的东西

兼容性问题

看着貌似部分支持ie10, 11, 但实测是不支持的, 也加了私有前缀

代码

.con {
      border: 1px solid pink;
      width: 600px;
      height: 600px;
      -ms-display: grid;
      display: grid;
      -ms-grid-template-columns: 100px 100px 100px;
      grid-template-columns: 100px 100px 100px;
    }
    .item {
      border: 1px solid #000;
    }

ie11下效果

初步体验

设置里面每一行或列的长度

    grid-template-rows: 100px 100px 100px; // 25%

简写

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

按照指定宽度进行划分, 再不知道分数的情况

    grid-template-rows: repeat(auto-fill, 100px); // 自动按照100px排列, 不用管分成多少份
    grid-template-rows: repeat(3, 1fr); // 平均分为3分, 每份等分, 可以理解为 1fr 1fr 1fr
    grid-template-rows: 1fr 2fr 3fr; // 第一个一份第二个2份, 第三个三份

minmax

设置最小高度是100px, 最大高度是等分, 父元素使用了vh来设置高度, 随着浏览器窗口变化而改变, 当高度等于100px的时候不再发生变化

 grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);

grid-template-rows: repeat( minmax(100px, 1fr) );
/** 应该这样 */
grid-template-rows:repeat(3, minmax(100px, 1fr));

间距

row-gap 以及 column-gap或者简写 gap

row-gap: 10px; // 设置行之间的间隙

column-gap： 10px; // 设置列之间的间隙

设置位置

设置开始的位置和结束行的位置

  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;

案例: 做一个类似这样的效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .con {
      display: grid;
      border: 1px solid pink;
      width: 300px;
      height: 300px;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }
    .item {
      border: 1px solid #000;
    }
    .item:nth-child(1) {
      grid-row-start: 1;
      grid-row-end: 4;
      grid-column-start: 1;
      grid-column-end: 2;
      background-color: pink;
    }
    .item:nth-child(2) {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 2;
      grid-column-end: 3;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

命名取别名

核心代码

.con {
 grid-template-columns: [c-1-start] 100px [c-1-end c-2-start] 100px  [c-2-end];
 grid-template-rows: [r-1-start] 100px [r-1-end r-2-start] 100px [r-2-end];
}
.item:nth-child(1) {
  grid-row-start: r-1-start;
  grid-row-end: r-2-end;
  grid-column-start: c-1-start;
  grid-column-end: c-1-end;
  background-color: pink;
}
.item:nth-child(2) {
  grid-row-start: r-1-start;
  grid-row-end: r-1-end;
  grid-column-start: c-2-start;
  grid-column-end: c-2-end;
  background-color: #ccc;
}
/** 第三个可以不用写 */

给重复写法取名

grid-template-columns: repeat(3, [co] 1fr [ce]);
grid-template-rows: repeat(3,[ro] 1fr [re]);
.item:nth-child(2) {
    grid-row-start: ro 2;
    grid-row-end: ro 3;
    grid-column-start: co 2;
    grid-column-end: co 3;
    background-color: #ccc;
  }

设置起始位置, 结束位置设置占的长度即可

  .item:nth-child(1) {
    grid-row-start: ro 1;
    grid-row-end: span 2;
    grid-column-start: co 1;
    grid-column-end: span 2;
    background-color: pink;
  }

**注意: ** row 是横着数的, column 是竖着的

综合简单的使用

使用 grid-row 以及 grid-column

.item:nth-child(1) {
  grid-row: 2/3; // 设置横着的第二条线到横着的第三条线
  grid-column: 1/2;
  background-color: pink;
}

通过设置起初的位置和占的长度

.item:nth-child(1) {
  grid-row: 2/span 2; // 从第二行开始, 并且占用两格
  grid-column: 1/span 3;
  background-color: pink;
}

案例实现bootstrap的栅格效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .con {
      display: grid;
      border: 1px solid pink;
      width: 600px;
      height: 600px;
      grid-template-columns: repeat(4, [co] 1fr [ce]);
      grid-template-rows: repeat(4,[ro] 1fr [re]);
    }
    .item {
      border: 1px solid #000;
    }
    .col-1 {
      grid-column-end: span 1;
    }
    .col-2 {
      grid-column-end: span 2;
    }
    .col-3 {
      grid-column-end: span 3;
    }
    .col-4 {
      grid-column-end: span 4;
    }
  </style>
</head>
<body>
  <div class="con">
    <div class="item col-4">1</div>
    <div class="item col-2">2</div>
    <div class="item col-2">3</div>
    <div class="item col-3">4</div>
    <div class="item col-1">4</div>
  </div>
</body>
</html>

效果:

使用区域定位

区域定位就是通过每一个块的位置来定位 grid-area: 1/1 2/2

/* 代表起始边是一行一列的, 结束边是二行二列, 都是行列的顺序 */
      grid-area: 1/1/2/2;

命名的区域定位

通过取别名的方式

grid-template-rows: repeat(3, [r] 1fr);
grid-template-columns: repeat(3, [c] 1fr);
.con {
      display: grid;
      border: 1px solid pink;
      width: 600px;
      height: 600px;
      grid-template-columns: repeat(4, [c] 1fr);
      grid-template-rows: repeat(4, [r] 1fr);
    }
    .item {
      border: 1px solid #000;
      /* 代表起始边是一行一列的, 结束边是二行二列, 都是行列的顺序 */
      /* 注意还是按照边来数的 */
      grid-area: r 1/ c 1/ r 2/ c 3; 
    }
// 使用的时候
grid-area: r 1/ c 1/ r 4/ c 4

实现下图效果

划分区域, 指明区域

grid-template-columns:60px 1fr;
grid-template-rows:  60px 1fr 60px;
grid-template-areas: 'header header'
  'left main'
  'footer footer';

通过该方法定义指定的位置

.item:nth-child(1) {
  grid-area: header;
  background-color: pink;
}

通过 . 来实现占位

.con {
  display: grid;
  border: 1px solid pink;
  width: 600px;
  height: 600px;
  grid-template-columns:60px 1fr;
  grid-template-rows:  60px 1fr 60px;
  grid-template-areas: '. .'
    '. .'
    'footer footer';
}
.item:nth-child(1) {
  grid-area: footer;
  background-color: pink;
}

栅格的流动方向

grid-auto-flow: row dense;

栅格整体的对齐方式 - 内容的空间小于容器空间时候的排列方式

和flex布局的一样这两个属性默认都是 stretch 拉伸 justify-content: space-evenly 主轴对齐方式 align-item: center; 副轴对齐方式

栅格元素独立控制对齐方式

单独控制一个的位置

.item:nth-child(1) {
  /* 横向开始 */
  justify-self: start; 
  /* 纵向结束 */
  align-self: end;
}

组合写法

整体的时候的组合写法

/* 组合简写模式 */
place-items: start end;

控制单个的写法

/* 第一个表示垂直方向 第二个表示水平方向 */
  place-self: start end**;**

实战公司案例布局

使用了grid之后, 一切都是那么的简单, 原本用了一二十分钟写完的, 现在只用了几分钟就搞定了, 但是公司里面还是不能这样, 毕竟要兼容ie

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: grid;
      width: 1200px;
      margin: 0 auto;
      height: 900px;
      background-color: #ccc;
      grid-template-columns: repeat(3, 1fr);
    }
    .item {
      border: 1px solid #000;
    }
    .item:nth-child(2) {
      /* 方法1 */
      grid-row-start: 1;
      grid-row-end: 3;
      grid-column-start: 2;
      grid-column-end: 3;

      /* 方法2 */
      grid-row-end: span 2;

      /* 方法3 */
      grid-row: 1/3;
      grid-column: 2/3;

      /* 方法4 */
      /* 1行2列, 3行3列 */
      grid-area: 1/2/3/3;
    }
  </style>
</head>
<body>
  <!-- 通过栅格完成目前公司正在做的项目的布局 -->
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</body>
</html>

具体要实现的效果: