Css Grid: Центр выровнять различное количество элементов в 2 ряда

Question

Я должен поместить 7 div s (изображения) в два ряда, 3 в 1-м ряду и 4 во 2-м ряду.Верхние 3 div s должны быть центрированы, а нижние 4 могут занимать все пространство.

Вот что я сделал:

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr repeat(3, 170px) 1fr;
  grid-template-areas: ". item1 item2 item3 ."
                       "item4 item5 item6 item7";
  grid-template-rows: 1fr 1fr;
}

.content .box {
   width: 170px;
   height: 170px;
   border: solid 1px #000;
}

.content.box:nth-child(1) {
  grid-area: box1;
}

.content.box:nth-child(2) {
  grid-area: box2;
}

.content.box:nth-child(3) {
  grid-area: box3;
}

.content.box:nth-child(4) {
  grid-area: box4;
}

.content.box:nth-child(5) {
  grid-area: box5;
}

.content.box:nth-child(6) {
  grid-area: box6;
}

.content.box:nth-child(7) {
  grid-area: box7;
}

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

Answer 1

Вы можете создать 12 столбцов сетки , используя grid-template-columns: repeat(12, 1fr):

1. Установите диапазон столбцов на 4 для первой строки и3 для второго ряда.

2. Используйте justify-items: center - для выравнивания контейнеров по центру, чтобы получить выравнивание по центру.

3. Теперь вы можете настроить пролет или использовать justify-self для требуемого макета.

См. Демонстрацию ниже:

.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  justify-items: center;
}

.content .box {
  height: 170px;
  width: 170px;
  border: solid 1px #000;
}
.box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { /* first three boxes */
  grid-column: span 4;
}
.box:nth-child(3) ~ .box { /* the last 4 boxes */
  grid-column: span 3;
}
/* alignment adjustment if needed */
.box:nth-child(1) {
  justify-self: flex-end;
}
/* alignment adjustment if needed */
.box:nth-child(3) {
  justify-self: flex-start;
}

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

Демонстрация с изображениями в коробках :

.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  justify-items: center;
}

.content .box {
  border: solid 1px #000;
}

.box img {
  display: block;
  width: 100%;
}

.box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { /* first three boxes */
  grid-column: span 4;
}
.box:nth-child(3) ~ .box { /* the last 4 boxes */
  grid-column: span 3;
}
/* alignment adjustment if needed */
.box:nth-child(1) {
  justify-self: flex-end;
}
/* alignment adjustment if needed */
.box:nth-child(3) {
  justify-self: flex-start;
}

<div class="content">
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
</div>

Answer 2

Сетка, как следует из ее названия, должна иметь форму сетки.Это означает, что количество столбцов должно быть пространством для всех строк.

Таким образом, ваш стиль для областей не принимается браузером, потому что он имеет 5 столбцов для первой строки и 4 для второйстрока.

@ kukkuz уже опубликовал ответ, исправляющий эту проблему.Здесь у вас есть еще одна возможность, по моему мнению, более приспособленная к вашему запросу.

В любом случае, вероятно, лучшим решением для этого макета будет использование flex (поскольку макет не является реальной сеткой)

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(8, 100px);
  grid-template-areas: "empt box1 box1 box2 box2 box3 box3 emp2"
                       "box4 box4 box5 box5 box6 box6 box7 box7";
  grid-template-rows: 1fr 1fr;
}

.content .box {
   width: 180px;
   height: 170px;
   border: solid 1px #000;
}

.content .box:nth-child(1) {
  grid-area: box1;
}

.content .box:nth-child(2) {
  grid-area: box2;
}

.content .box:nth-child(3) {
  grid-area: box3;
}

.content .box:nth-child(4) {
  grid-area: box4;
}

.content .box:nth-child(5) {
  grid-area: box5;
}

.content .box:nth-child(6) {
  grid-area: box6;
}

.content .box:nth-child(7) {
  grid-area: box7;
}

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

Answer 3

Изменения CSS: устраните весь код CSS (в вашем вопросе) и замените его следующим.Использование grid-template-columns: 1fr repeat(3, 170px) 1fr; все испортило, потому что оно не представляло оба ряда блоков.Использование grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); позволяет браузеру / системе определить фактическое размещение для этой конкретной строки. И это позволяет каждой строке делать свое дело.Использование place-items: end center; означает, что вы хотите, чтобы все было отцентрировано, но вы хотите, чтобы система запускалась в конце, а затем центрировала ее.Это предотвращает застревание предметов в крайнем левом положении.Примечание: вам не нужен какой-либо другой CSS для желаемого эффекта.Просто классы .content и .box.Ничего другого.

.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    place-items: end center;
}

.box {
   width: 170px;
   height: 170px;
   border: solid 1px #000;
}

Изменения в HTML: замените ваш HTML на (ниже).Это разделит коробки на два ряда.Я обернул каждую строку .content, чтобы они могли содержать различное количество блоков без проблем.

<div class="content">
  <div class="box">1</div>
   <div class="box">2</div>
  <div class="box">3</div>
</div>

<div class="content">
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

Надеюсь, мое объяснение поможет вам лучше понять CSS Grid Layout.:)