如何在 CSS 中获得 5 x 5 的网格？答案

【问题标题】：How to get a 5 by 5 grid in css?如何在 CSS 中获得 5 x 5 的网格？
【发布时间】：2017-10-16 22:35:49
【问题描述】：

我有下面的布局。
如何制作具有 5 行和 5 列的网格布局，即 5 x 5 网格？

.box {
  background-color: lightgrey;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.wrapper {
  width: 600px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: column;
}

<div class="wrapper">
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
</div>

【问题讨论】：

标签： html css reactjs css-grid

【解决方案1】：

你快到了。使用repeat创建5行和列。

grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(5, 100px);

body {
  margin: 40px;
}

.box {
  background-color: lightgrey;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.wrapper {
  width: 600px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-auto-flow: column;
}

<div class="wrapper">
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
</div>

【讨论】：