grid布局

Posted 2021-02-20 yaya-003

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了grid布局相关的知识，希望对你有一定的参考价值。

对比一下常用的三种布局：

1.传统布局方式：利用position属性+display属性+float属性，兼容性最好，但是效率低，麻烦

2.flex布局：效率高，学习成本低，兼容性强

3.grid:翻译网格，grid布局相对于flex布局稍微复杂那么一点点，但grid布局比flex布局更强大。

有一说一，grid没有flex兼容性好。

flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

grid基本概念

技术图片

每个grid布局，有隐藏的网格线，用来帮助定位（4*4的网格有5*5条网格线）

技术图片

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

布局：

  <div class="wrap">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </div>

基本样式：

margin:0;

padding: 0;

}

.wrap{

width: 600px;

height: 600px;

border: 5px solid black;

}

.item{

width:100px;

height:100px;

}

.item1{

background-color: blueviolet;

}

.item2{

background-color: pink;

}

.item3{

background-color: yellowgreen;

}

.item4{

background-color: blue;

}

.item5{

background-color: orangered;

}

.item6{

background-color: red;

}

.item7{

background-color: gray;

}

.item8{

background-color: paleturquoise;

}

.item9{

background-color: yellow;

}

.item10{

background-color: rgb(226, 43, 150);

}

页面效果：

技术图片

下面就看一下容器属性有哪些？

display:grid 指定一个容器采用网格布局

1.grid-template-columns：想要有多少列，就填写相应属性值的个数，不填写自动分配

（如果只定义了列没有定义行，那这些元素会平分盒子高度）

    .wrap{
      width: 600px;
      height: 600px;
      border: 5px solid black;
      display: grid;
      grid-template-columns:100px 100px 100px;
    }

技术图片

2.grid-template-rows：想要有多少行，就填写相应属性值的个数，不填写自动分配

（如果只定义行不定义列）

技术图片

哈哈哈，很好玩是不是？搞错了重来！

 .wrap{
      width: 600px;
      height: 600px;
      border: 5px solid black;
      display: grid;
      grid-template-columns:100px 100px 100px;
      grid-template-rows:100px 100px 100px 100px;
    }

技术图片

这是定义了行和列的

grid-template的相关函数

repeat(次数，重复的值)

　　（1）grid-template-columns:100px 100px 100px; 等价于 grid-template-columns:repeat(3,100px);

　　 （2）auto-fill（有时单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充）　

    .wrap{
      /* width: 600px;
      height: 600px; */
      border: 5px solid black;
      display: grid;
      /* grid-template-columns:100px 100px 100px; */
      /* grid-template-columns:repeat(3,100px); */
      grid-template-columns:repeat(auto-fill,100px);
      grid-template-rows:100px 100px 100px 100px;
    }

里面的项目会随着容器的宽度而变化

　　技术图片