Расположить блоки (grid)

Рейтинг: 0Ответов: 1Опубликовано: 19.01.2023

main {
  display: grid;
  grid-template-rows: min-content min-content;
 position: fixed;
 height: 100vh;
 width: 100vw;
 background: #fff;

}
.box1 {
   grid-area: 1 / 1;
}
.box2 {
   grid-area: 2 /1;
   background: beige;
}
.box3 {
   grid-area: 1 / 2 / -1;
   background: gray;
}
<main>
    <div class="box1">Блок 1</div>
    <div class="box2">Блок 2</div>
    <div class="box3">Блок 3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</main>

Почти работает, но как выполнить так, чтобы второй блок и первый. Высота была их относительно контенту, а высота третьего блока, занимала всю высоту тех блоков что по левому краю?

У меня это выглядит так введите сюда описание изображения

Главное из условий, что все 3 блока находятся на одном уровне. То есть не глубже не выше родителя, не обертывая их в дополнительные родители.

css html html5 css3 grid
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Решение

Тут вам понадобится неиспользуемая дополнительная ячейка:

main {
  display: grid;
  grid-template-rows: max-content max-content 1fr;
  position: fixed;
  height: 100vh;
  width: 100vw;
  background: #fff;
}

.box1 {
  grid-area: 1 / 1;
}

.box2 {
  grid-area: 2 /1;
  background: beige;
}

.box3 {
  grid-area: 1 / 2 / -1;
  background: gray;
}
<main>
  <div class="box1">Блок 1</div>
  <div class="box2">Блок 2</div>
  <div class="box3">Блок 3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</main>

Собственно так выглядит решетка: