css grid layout 初步认识

作者: 小a草 | 来源:发表于2018-08-29 12:47 被阅读0次

css grid layout 初步认识
css grid layout
CSS Grid Layout 5 Practical Proj
网格布局
翻译 | CSS网格（CSS Grid）布局入门
快速开始grid布局
CSS3 Grid Layout 简单介绍与基本属性
css知识点
React丨布局拖拽组件
Grid 布局（一）

css grid layout 初步认识

近期在在回顾css的时候，重新学习了一下css的相关布局。
根据之前常用的布局包括

固定尺寸

布局可以从固定尺寸先了解，先构思好页面的主要结构，然后设定页面的整体大小，在页面的整体中划分小的模块进行尺寸的固定，直到整个页面布局完成。

自适应尺寸

响应式的布局的结构其实就是多个固定尺寸的组合，元素的宽度，字体的大小一般会以百分比的形式设置，通过媒体查询进行不同分辨率下的布局，

弹性盒子flex布局

弹性盒子，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。具体访问
https://www.runoob.com/w3cnote/flex-grammar.html
https://blog.csdn.net/naruto_luoluo/article/details/51279761

虽然css grid layout 在之前自己只是听说，然而自己没有实际用过，因为之前浏览器的支持程度比较低，所以就没有去学习了解，在最近重新回顾css的时候自己在https://caniuse.com/中发现，css grid layout的支持程度已经很高了，于是自己就重新认识了一下。

IMG20180829_103613.png

什么是网格布局？

在web内容中，可以将内容分隔成多个内容块，每个内容块占据自己的空间，因此形成了一个网状的格局，类似我们在用table的时候，将其分为多个行列的单元格，形成了一个二维布局空间。

waht is css grid layout ?

css grid layout 是一个web内容的二维布局系统，它可以将你的内容按行和列进行划分，并且直接明确的指定了划分的某个内容块所处的位置空间。它所包含的基础属性名称有

grid(设定网格) , grid-template-columns(网格列) , grid-template-rows(网格行) ，grid-gap(网格间隙)

对css grid layout进行练习和认识

一,按网格线划分布局

    <div class="wrapper">
      <div class="box a">A</div>
      <div class="box b">B</div>
      <div class="box c">C</div>
      <div class="box d">D</div>
      <div class="box e">E</div>
      <div class="box f">F</div>
    </div>
    <style>
        .wrapper {
          display: grid;
          grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
          grid-template-rows: auto 10px auto 10px auto;
        }
        .box {
          background-color: #444;
          color: #fff;
          font-size: 150%;
          padding: 20px;
          text-align: center;
        }
        .a{
          grid-column: 1 / 6; 
          grid-row: 1 / 2;
        }
        .b {
          grid-column: 7 / 8; 
          grid-row: 1 / 6; 
          background: orange;
        }
        .c { 
          grid-column: 1 / 2; 
          grid-row: 3 / 4;
        }
        .d { 
          grid-column: 2 / 6; 
          grid-row: 3 / 4;
          background:red;
        }
        .e { 
          grid-column: 5 / 6; 
          grid-row: 3 / 4;
        }
        .f { 
          grid-column: 1 / 4; 
          grid-row: 5 / 6;
        }
    </style>

在上面布局中，我们设定 .wrapper{grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;} 这样就将其分为7列，会有8条列网格线，设定 .wrapper{grid-template-rows: auto 10px auto 10px auto;}将其分为5行，因此形成6条行网格线。
然后设定.a{grid-column: 1 / 6; grid-row: 1 / 2;},让A块占据列网格线1-6，行网格线1-2之间的部分；同样设定.b{grid-column: 7 / 8; grid-row: 1 / 6;}让B块占据列网格线7-8，行网格线1-6，其他模块按同样的方法。

注意也可以指定已被其他块占据的网格线部分，例如效果图D块，.d{grid-column: 2 / 6; grid-row: 3 / 4;} ,这样就会出现按顺序覆盖的现象因为E块元素节点在D的后面，所以E块遮挡了D块列5-6网格线之间的部分，也可以根据自己的需求来设置z-index调整层级关系
效果图 IMG20180829_113317.png

二，按fr进行划分
下班是自己利用css grid和flex进行的一个列表布局，在这个部分中，表头固定，列表部分如果超出设定高度进行滚动

<div class="frboxauto">
        <div class="frbox">
            <div class="tabtit">A</div>
            <div class="tabtit">B</div>
            <div class="tabtit">C</div>
        </div>
        <ul class="listbox">
            <li>
                <div class="frboxcon">1</div>
                <div class="frboxcon">2</div>
                <div class="frboxcon">3</div>
            </li>
            <li>
                <div class="frboxcon">1</div>
                <div class="frboxcon">2</div>
                <div class="frboxcon">3</div>
            </li>
            <li>
                <div class="frboxcon">1</div>
                <div class="frboxcon">2</div>
                <div class="frboxcon">3</div>
            </li>
        </ul>
    </div>
    <style>
        .frboxauto{
            width:400px;
            margin:20px;
            display: flex;
            flex-direction:column;
            height:100px;
        }
        .frbox{
            display:grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: auto;
            grid-gap:10px;
        }
        .tabtit{
            background:#444;
            color:#fff;
            text-align: center;
        }
        .listbox{
            flex:1;
            list-style-type: none;
            padding:0;
            margin:0;
            overflow-y: auto;
        }
        li{
            width:100%;
            display:grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: auto;
            grid-gap:10px;
            background-color: #999;
            height:35px;
            line-height: 35px;
        }
        .frboxcon{
            text-align: center;
        }
    </style>

如上设置.frbox{grid-template-columns: 1fr 2fr 1fr;},将其按列分为4栏，其中中间块B占据2栏，
同样设定 li{ grid-template-columns: 1fr 2fr 1fr;}按和表头相同的栏数划分，这样便形成了一个简单的列表布局。

效果图 1234.gif