html - CSS 网格 - 2x2 网格总是尽可能占据整个宽度

Question

我正在尝试创建一个 2x2 CSS 网格(将来可能会扩展到 3x2)，当网格中有三个 child 时，它只会将元素推到第一行，我不确定这是否可行网格。

基于元素数量的场景是:

2 项(最少)

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
</div>

3 项

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
</div>

4 项

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
  <div class="player">Player 4</div>
</div>

到目前为止，我尝试过的是以下内容:

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 2fr));
  grid-template-rows: repeat(2, minmax(150px, 2fr));
  border: blue 5px solid;
}

.player {
  border: red 5px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}

将列数/行数更改为自动调整/自动填充也不会产生预期的结果，而是无论如何都会占用整个宽度。我附上了我在下面尝试过的实例:

https://codesandbox.io/s/misty-smoke-bwvtt

Answer 1

由于总共只有大约 4 个元素，您可以手动处理每个案例。在这种情况下，您只需要两个声明而无需任何模板。隐式网格将为您完成这项工作。

.grid {
  display: grid;
  height: 300px;
  border: blue 5px solid;
}

.player {
  border: red 5px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 3 players: make the last one take two colums*/
.player:nth-child(3):last-child {
  grid-column: span 2;
}


/* 4 players: make the fourth element in the second column */
.player:nth-child(4) {
  grid-column: 2;
}

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
</div>

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
</div>

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
  <div class="player">Player 4</div>
</div>

对于 3x2 网格，您可以添加更多声明:

.grid {
  display: grid;
  height: 300px;
  border: blue 5px solid;
}

.player {
  border: red 5px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 3 players */
.player:nth-child(3):last-child {
  grid-column: span 2;
}


/* 4 players  */
.player:nth-child(4):last-child {
  grid-column: 2;
}


/* 5 players */
.player:nth-child(1):nth-last-child(5),
.player:nth-child(2):nth-last-child(4),
.player:nth-child(3):nth-last-child(3) {
  grid-column: span 2;
}

.player:nth-child(4):nth-last-child(2) {
  grid-column: span 3;
}

.player:nth-child(5):nth-last-child(1) {
  grid-column:  4/span 3;
}


/* 6 players */
.player:nth-child(6) {
  grid-column: 3;
}

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
</div>

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
</div>

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
  <div class="player">Player 4</div>
</div>

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
  <div class="player">Player 4</div>
  <div class="player">Player 5</div>
</div>

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
  <div class="player">Player 4</div>
  <div class="player">Player 5</div>
  <div class="player">Player 6</div>
</div>