为记忆游戏创建网格

Question

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

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

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

我想如果我以倒数第二张卡片为目标并以这种方式创建 space 但无法弄清楚如何以每张卡片为目标将其放入单独的网格中。

Answer 1

如果您对列宽没有限制，使用 flexbox 会更容易。由于其“table-like”行为，使用 grid 模块很难处理最新的 child，而使用 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>

Answer 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 上阅读本指南。

为记忆游戏创建网格

Create a grid for memory game

html

css

css-grid

tailwind-css