Css display:grid 网格布局

1.网格布局可以说是非常简单，给要网格布局的元素加上display:grid; 直接看下代码

.disgrid{
  display:grid;
  width: 40%;
  background: #4678fa;
  grid-template-columns:auto auto auto;/* 表示三列 */
  grid-template-rows:auto auto auto;
  grid-gap: 10px;
  margin-bottom: 10px;
}


<div class="disgrid">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
  </div>
</div>

直接给要网格布局的元素加上 display:grid;

看到css,---

grid-template-columns:auto auto auto;/* 表示三列 */
grid-template-rows:auto auto auto;/* 表示三行