详解grid布局

grid

本文主要介绍以下几个属性

grid-template-columns

grid-template-rows

grid-gap

html代码

<div class="container">
   <div class="item item-1">1</div>
   <div class="item item-2">2</div>
   <div class="item item-3">3</div>
   <div class="item item-4">4</div>
   <div class="item item-5">5</div>
   <div class="item item-6">6</div>
   <div class="item item-7">7</div>
   <div class="item item-8">8</div>
   <div class="item item-9">9</div>
 </div>

css代码

.container{
   margin: 150px auto; 
   max-width: 500px;
   max-height: 500px;
   background-color: rgb(247,212,175);
   border: rgb(233,171,88) solid 5px;
   padding: 5px;
 }
 .item{
   margin: 2px;
   background-color: rgb(233,171,88);
   color: white;
   font-size: 2em;
   text-align: center;
   display: grid;
 }

此时效果是下图这样

1.grid-template-columns

指定网格布局中列的布局

grid-template-columns: 1fr 2fr 1fr;
/* 	
  对列进行布局 
  grid布局新引入长度单位 fr 
  可以按比例把容器内部空间均分 效果如下图 
  中间一列和其他两列的长度比为1:2:1
 */

有几个参数就有几列

grid-template-columns: 1fr 2fr;
/* 有几个参数就有几列 */

grid-template-columns: 120px 120px 60px;
/* 也可以指定长度 也可以用百分数和auto */

2.grid-template-rows

指定网格布局中行的布局
和grid-template-columns同理

3.grid-gap

grid-gap: 10px;
/* 设置网格的行列间距*/