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

Question

我正在尝试创建一个 2x2 CSS 网格（将来可能扩展到 3x2），当网格中有三个孩子时，它只会将项目推送到第一行，我不确定这是否可能网格。

基于项目数量的场景将是：

2 项（最少）

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

2 Player Grid

3 项

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

3 Player Grid

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>

4 Player Grid

到目前为止，我尝试过的如下：

.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):nth-last-child(1) {
    grid-column:span 2;
}

/* 4 players: make the second in the second column */
.player:nth-child(2):nth-last-child(3) {
    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: make the last one take two colums*/
.player:nth-child(3):nth-last-child(1) {
    grid-column:span 2;
}

/* 4 players: make the second in the second column */
.player:nth-child(2):nth-last-child(3) {
    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:1/4;
}
.player:nth-child(5):nth-last-child(1){
    grid-column:4/7;
}

/* 6 players */
.player:nth-child(3):nth-last-child(4) {
    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>