如何在 css 中获得 5 x 5 的网格？

Question

我有下面的布局。
如何制作具有 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>

Answer 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>

如何在 css 中获得 5 x 5 的网格？

How to get a 5 by 5 grid in css?

html

css

reactjs

css-grid