CSS Grid - сетка 2x2 всегда по возможности занимает всю ширину - PullRequest
Новая
       1

CSS Grid - сетка 2x2 всегда по возможности занимает всю ширину

1 голос
/ 21 октября 2019

Я пытаюсь создать CSS-сетку 2x2 (возможно, в будущем будет расширена до 3x2), которая только помещает элементы в первый ряд, когда в сетке есть три дочерних элемента, и я не уверен, возможно ли это ссетка.

Сценарии, основанные на количестве предметов, будут:

2 предмета (минимум) 

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

2 Сетка игрока

3 предмета 

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

3 Сетка игрока

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 Сетка игрока

Пока что я попробовал следующее: 

.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

1 Ответ

1 голос
/ 21 октября 2019

Поскольку всего около 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>
...