Шаблон grid, расположить 12 блоков в одном родителе

Question

grid-template:
        "a a b b b b b b b b " 110px
        "c c c c c c c c c c" 70px / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Во втором ряде необходимо расположить 10 одинаковых блока, изображения. Если каждому изображению присвоить grid-area: с; друг на друга закинет. А присваивать каждому изображению уникальный area. Как то накладно, все блоки в одном родителе...

По порядку, блок a - 1шт(изображение), c - 10 шт (изображения), b - простой div

В первом ряду, блок a должен занимать 20%, остальное блок 'b' Во втором ряду необходимо расположить 10 изображений, так чтобы они равномерно заняли всю ширину.

.container { 
  display: grid;
  gap: 10px;
  padding:10px;
  grid-template:
    "a a b b b b b b b b" 170px 
    "c3 c4 c5 c6 c7 c8 c9 c10 c11 c12" 70px;
}

.b { grid-area: b; }
.a { grid-area: a; }

.c:nth-child(3) {grid-area: c3}
.c:nth-child(4) {grid-area: c4}
.c:nth-child(5) {grid-area: c5}
.c:nth-child(6) {grid-area: c6}
.c:nth-child(7) {grid-area: c7}
.c:nth-child(8) {grid-area: c8}
.c:nth-child(9) {grid-area: c9}
.c:nth-child(9) {grid-area: c9}
.c:nth-child(11){grid-area: c11}
.c:nth-child(12){grid-area: c12}

.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="b"></div>
  <div class="a"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
</div>

Answer 1

Десять раз перечитал когда этот вопрос появился, потом ещё раз пять, потом дождался комментариев и судя по всему никто ничего не понимает благодаря вашим формулировкам и что вы хотите добиться. Но, по крайней мере сейчас, когда появился код, который отрисовывает вашу хотелку, то, если я правильно понял вы хотите меньшими усилиями отрисовать подобное? Тогда как-то так:

.container { 
  display: grid;
  gap: 10px;
  padding:10px;
  grid-template-rows: 170px 70px;
  grid-template-columns: repeat(10, 1fr);
}
.container *:after {
  content:attr(class);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container > div {
  border: 1px solid;
}
.b {
  grid-area: 1 / 3 / 1 / 11;
}
.a {
  grid-area: 1 / 1 / 1 / 3;
}

<div class="container">
  <div class="b"></div>
  <div class="a"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
</div>

P.S. и, не знаю с какой целью у вас были изменены местоположения блоков .a и .b но если вы захотите их поменять местами в контейнере, то для корректного переразмещения достаточно будет поменять их grid-area.

БЛОГ НА HUSL

Шаблон grid, расположить 12 блоков в одном родителе

Ответы (1 шт):