html - 显示 9x9 div/grid css

Question

我正在尝试使用以下 css 制作一个 9x9 div，但如果我显示 4 个 div，如下图所示，它会崩溃

这是我的 css

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.cell {
  flex: 0 0 33%;
  height: 100px;
  width: 100px;
  margin-bottom: 5px;
}

<div class="grid">
        <div class="cell" style="background-color: green">1</div>
        <div class="cell" style="background-color: red">1</div>
        <div class="cell" style="background-color: blue">1</div>
        <div class="cell" style="background-color: yellow">1</div>
      </div>

我想要的输出是一个 css，它允许我的网格显示以下内容

Answer 1

尝试

justify-content : flex-start;

反而。这使子元素从每一行的左侧开始打包。