图解grid布局（基础）

看完我的这个，记得直接看进阶版，最好自己上手一下，把关键点记下来  长期不用容易忘

最强大的 CSS 布局 —— Grid 布局Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划 - 掘金

抽象版

代码

<div class="wrapper" style="margin:60px">

  <div class="one item">One</div>

  <div class="two item">Two</div>

  <div class="three item">Three</div>

  <div class="four item">Four</div>

  <div class="five item">Five</div>

  <div class="six item">Six</div>

</div>

.wrapper {

  /* grid布局 */

  display: grid;

  /*  一共3列 3列总宽度为200px  */

  grid-template-columns: repeat(3, 200px);

  /*  宫格之间的间距为20px */

  grid-gap: 20px;

  /*  第一行高度：100px，第二行高度：200px，以此类推第三第n行  */

  grid-template-rows: 100px 200px;

}

.one {

  background: #19CAAD;

}

.two {

  background: #8CC7B5;

}

.three {

  background: #D1BA74;

}

.four {

  background: #BEE7E9;

}

.five {

  background: #E6CEAC;

}

.six {

  background: #ECAD9E;

}

.item {

  text-align: center;

  font-size: 200%;

  color: #fff;

}

参考最强大的 CSS 布局 —— Grid 布局Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划 - 掘金