强大的display:grid

自从用习惯flex布局我基本已经不怎么使用float了。
现在又出现了grid布局，就像flex的升级版，布局上十分强大。
主要属性：
grid-template-columns：//竖向排列
grid-template-rows：//横向排列
首先比较一下flex和grid实现自适应九宫格，高度800px，宽度适应：

flex

超过一层后样式就复杂了，特别是边框的处理有点复杂。(方法很多，不一一去展示了)。

<html>
<head>
  <style type="text/css">
   .box {
      padding: 10px;
      padding-bottom: 0;
      padding-right: 0;
      display: flex;
      flex-direction: column;
      height: 800px;
      width: calc(100vw - 20px);
      background-color: #000;
    }
    .content {
      display: flex;
      margin-bottom: 10px;
      flex: 1
    }
    .b {
      flex: 1;
      margin-right: 10px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="content">
      <div class="b">1</div>
      <div class="b">2</div>
      <div class="b">3</div>
    </div>
    <div class="content">
      <div class="b">4</div>
      <div class="b">5</div>
      <div class="b">6</div>
    </div>
    <div class="content">
      <div class="b">7</div>
      <div class="b">8</div>
      <div class="b">9</div>
    </div>
  <div>
</body>
</html>

 


 
flex

grid

真的好用！方法也可以有很多，相对flex而言写起来简单多了哈

<html>
<head>
  <style type="text/css">
    .content {
      padding: 10;
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto auto;
      height: 780px;   //padding 有个20的宽度
      background-color: #000;
      grid-gap: 10px;
    }
    .b {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="b">1</div>
    <div class="b">2</div>
    <div class="b">3</div>
    <div class="b">4</div>
    <div class="b">5</div>
    <div class="b">6</div>
    <div class="b">7</div>
    <div class="b">8</div>
    <div class="b">9</div>
  </div>
</body>
</html>

效果图：


 
grid
接下来就只讲grid了。

常用属性，属性很多，主要练习下常用的一些属性：

  • grid: 1fr 1fr 1fr/1fr 1fr 1fr ; 高度 高度 高度/(一)列 (二)列 (三) 列
grid: 100px 200px 100px /1fr 1fr 1fr;

等于：

grid-template-rows: 100px 200px 100px; 
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: none; 
grid-auto-flow: initial;
grid-auto-rows: initial;
grid-auto-columns: initial;

  • grid-template-columns: 100px 100px; //有几列，每列有多大

  • grid-template-rows :100px 100px; //有几行，每行有多大

  • grid-template: [] '1 1 1' 100px [] /auto 50px auto;
    //[名称] '几列' 这行的高度 [名称] /三列对应的三个宽度
    //（名称可为空 '1 1 1' 就是均分三列）

  • grid-gap: 10px 20px ;//上下间隔10px，左右间隔20px

  • grid-gap: 10px；//上下左右间隔10px

  • grid-column-gap

  • grid-row-gap

  • justify-items：
    start：将内容对齐到网格区域(grid area)的左侧
    end：将内容对齐到网格区域的右侧
    center：将内容对齐到网格区域的中间（水平居中）
    stretch：填满网格区域宽度（默认值）

  • align-items：
    start：将内容对齐到网格区域(grid area)的顶部
    end：将内容对齐到网格区域的底部
    center：将内容对齐到网格区域的中间（垂直居中）
    stretch：填满网格区域高度（默认值）

  • justify-items：
    start：将网格对齐到 网格容器(grid container) 的左边
    end：将网格对齐到 网格容器 的右边
    center：将网格对齐到 网格容器 的中间（水平居中）
    stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
    space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
    space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
    space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

  • align-content：
    start：将网格对齐到 网格容器(grid container) 的顶部
    end：将网格对齐到 网格容器 的底部
    center：将网格对齐到 网格容器 的中间（垂直居中）
    stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
    space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
    space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
    space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间

这是主体上常用的一些属性了，不想做文档解释了。讲属性的文章挺多的，主要就是练习，多用用。



原文：https://www.jianshu.com/p/41c038baf994

posted @ 2019-03-13 16:35  橱窗外的小孩  阅读(340)  评论(0)  编辑  收藏  举报