Question

我正在尝试制作一个带有正方形的网格，但是当前正方形已被压扁，正方形也应该接触，而不是存在间隙。如何配置CSS网格来做到这一点？预先感谢。

我添加了以下代码。这很简单...

Rik

.grid {
    margin: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

.playable {
    display: inline-block;
    height: 100%;
    width: 100%;
    border: 3px yellow solid;
    background-color: black;
}

.empty {
    display: inline-block;
    height: 100%;
    width: 100%;
    border: 3px yellow solid;
    background-color: red;
}

    <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>

您可以看到细胞由于某种原因而被压扁...

Answer 1

对所有项目使用单个网格，然后让网格确定行和列的尺寸：

.grid {
  display: grid;
  grid-template-columns: repeat(8, 12vmax);
  grid-template-rows: repeat(8, 12vmax);
  height: 100vh;
}

.grid > .playable, .grid > .empty {
  border: 3px yellow solid;
}

.playable {
  background-color: black;
}

.empty {
  background-color: red;
}

body {
  margin: 0;
}

<div class="grid">
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
</div>

创建具有n * n个正方形的css网格

1 个答案: