CSS网格-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>