为记忆游戏创建一个网格答案

【问题标题】：Create a grid for memory game为记忆游戏创建一个网格
【发布时间】：2021-02-28 10:30:21
【问题描述】：

如何创建具有这种布局的网格？

我尝试了类似的方法，但显然它不起作用

.wrapper {
  display: grid;
  grid-template-areas: "i i i" "i i i" "i i i" ". i ."
}

<div class="wrapper">
  <div class="inside">Hello</div>
  <div class="inside">Hello</div>
  <div class="inside">Hello</div>
  <div class="inside">Hello</div>
  <div class="inside">Hello</div>
  <div class="inside">Hello</div>
</div>

我想如果我以倒数第二张卡片为目标并以这种方式创建空间，但不知道如何定位每张卡片以放入单独的网格中。

【问题讨论】：

标签： html css css-grid tailwind-css

【解决方案1】：

如果您对列的宽度没有限制，使用flexbox 执行此操作会更容易。使用 grid 模块处理最新的子模块是很棘手的，因为它的“类似表格”的行为，而使用 flex，你可以这样做：

div {
  display: flex;
  flex-wrap: wrap;
}

div > div {
    background-color: hotpink;
    height: 200px;
    width: 200px;
    margin: 30px auto;
}

<div>
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
  <div>07</div>
  <div>08</div>
  <div>09</div>
  <div>10</div>
</div>

【讨论】：

理想情况下我想继续使用网格，但这可能是一个解决方案。谢谢
从长远来看，这可能是我会做的解决方案，以使其可重复使用。

【解决方案2】：

您可以使用grid-column 属性来定位每个网格项。

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-gap: 1em;
}

.grid-item {
  background-color: dodgerblue;
  height: 100px;
  width: 100px;
  border-radius: 10px;
}

#last-item-1 {
  grid-column: 2 / 3;    /* Start from column-line 2 and end at 3 */
}

#last-item-2 {
  grid-column: 3 / 4;    /* Start from column-line 3 and end at 4 */
}

<div class="grid-wrapper">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item" id="last-item-1"></div>
  <div class="grid-item" id="last-item-2"></div>
</div>

您可以在CSS Grid 上阅读本指南。

【讨论】：