创建带有背景颜色的网格

Question

我想创建一个 19 * 19 的网格。每个网格正方形为 50px。在这个网格中，

odd columns

应该有红色背景，甚至列也有绿色背景。如何获得这个？

这是我用笔写的代码，在这个文件中，网格就像国际象棋中的那样，我不希望它是这样的。

https://codepen.io/viy_bal/pen/GRwLBBr

Answer 1

为每一行添加一个包装器似乎是一个好方法。在这种情况下，网格的 html 应该看起来像这样：

<div class="colored-grid">
    <div class="wrapper">
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
    </div>
    <div class="wrapper">
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      <div class='grid-cell'></div>
      ...
    </div>
  </div>

将

display: contents

添加到包装器的类中，其余代码将完成这项工作。

这是帮助我找到解决方案的链接。

另外，这里是我从你那里编辑的代码笔。