CSS grid学习（一）

一，兼容性

需要兼容IE10以下、ios 10.3 的Safari以下的话，该布局方式不适用。

CSS grid学习（一）

　数据来自：Can I use: https://www.caniuse.com/#search=grid

二、基本使用

<div class="grid-layout">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
</div>

.grid-layout{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
　  text-align: center;
 }
 .item1{ background: #f857b5;}
 .item2{ background: #fdffdc;}
 .item3{ background: #c5ecbe;}

CSS grid学习（一）

效果图

// 使用grid布局
display: grid;     

// 指定网格列数为 3列( 有3个参数 )
// fr 代表自适应宽的单位。
grid-template-columns: 1fr 2fr 1fr;


grid-template-columns代表列数的分配，行数分配是否可行呢？

.grid-layout{
    ...  
    grid-template-rows: 100px 20px;  
}

CSS grid学习（一）

　　　　　　　　　　　　　　　　　　　　　　　效果图

我们发现高度为120px，正好等于 grid-template-rows的值之和。且元素自动占第一行。

三、合并网格

接下来我们试试将横、纵向的网格进行合并。

.item1{
    grid-row:1/span 2;  

    background: #f857b5; 
}
.item3{ 
    grid-row:1/span 2;

grid-column:3/4;

    background: #c5ecbe;
}

grid-row 是 grid-row-start和 grid-row-end 的缩写
grid-column 是 grid-column-start和 grid-column-end 的缩写

效果图

在介绍 1/span 2 之前需要了解网格线是什么;

                                          网格线

grid-column:3/4; 代表从第 3 条纵线到第 4 条纵列的区域。

grid-row:span 1/2;代表从第 1 条横线到第 2 条横线的区域。中间多的 span 是一个属性值，代表合并网格的意思。

因此，item1能将第一横行的1 ~ 2列合并。item2能将第三列的 1 ~ 2行合并。 那么grid-column: 3/4; 是不是多余的呢？删掉之后，item2便会将其他元素挤下去。
仍有待研究。

现在可以布局以下界面啦：

<div class="grid-layout">
    <div class="nav">nav</div>
    <div class="aside">aside</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>

    .grid-layout {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 100px 200px 80px;
    }
    .nav {
      background: #f857b5;
      grid-column: 1/span 2;
    }
    .aside {
      background: #fdffdc;
      grid-row: 1/span 2;
      grid-column: 3/4
    }
    .main {
      background: #c5ecbe;
      grid-column: 1/span 2
    }
    .footer {
      background: #f857b5;
      grid-column: 1/span 4
    }

CSS grid学习（一）

一，兼容性

二、基本使用

三、合并网格

相关推荐