Заполнение пространства в grid-сетке

Question

Заполнение пространства в grid-сетке

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

Вот что дано на макете:

А вот что получилось у меня (пришлось уменьшить размер страницы чтобы всё поместилось в скрин):

А вот код:

.portfolio__items{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 23px;
}

.portfolio__item-img{
  background: #EDEDED;
  color: #EDEDED;
  transition: all .5s;
}

.portfolio__item-img:hover{
  background: linear-gradient(0deg, rgba(36, 33, 33, 0.8), rgba(36, 33, 33, 0.8)), #EDEDED;
  border: 12px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.portfolio__item-title{
  font-weight: 600;
  letter-spacing: 1.4px;
  margin-bottom: 10px;
}

.portfolio__item-descr{
  font-size: 12px;
  letter-spacing: 1px;
}

<div class="portfolio__items">
      <div class="portfolio__item-img portfolio__item-img-1" style="height: 495px; max-height: 495px;">
        <div class="portfolio__item-title">OCCA CUPIDATAT</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
      <div class="portfolio__item-img portfolio__item-img-2" style="height: 290px; max-height: 290px;">
        <div class="portfolio__item-title">OCCA CUPIDATAT</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
      <div class="portfolio__item-img portfolio__item-img-3" style="height: 365px; max-height: 365px;">
        <div class="portfolio__item-title">OCCA CUPIDATAT</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
      <div class="portfolio__item-img portfolio__item-img-4" style="height: 320px; max-height: 320px;">
        <div class="portfolio__item-title">OCCA CUPIDATAT</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
      <div class="portfolio__item-img portfolio__item-img-5" style="height: 395px; max-height: 395px;">
        <div class="portfolio__item-title">OCCA CUPIDATAT</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
      <div class="portfolio__item-img_two-elem">
        <div class="portfolio__item-img portfolio__item-img-6" style="height: 290px; max-height: 290px; margin-bottom: 22px;">
          <div class="portfolio__item-title">OCCA CUPIDATAT</div>
          <div class="portfolio__item-descr">DESIGN</div>
        </div>
        <div class="portfolio__item-img portfolio__item-img-7" style="height: 290px; max-height: 290px;">
          <div class="portfolio__item-title">OCCA CUPIDATAT</div>
          <div class="portfolio__item-descr">DESIGN</div>
        </div>
      </div>
      <div class="portfolio__item-img portfolio__item-img-8" style="height: 525px; max-height: 525px;">
        <div class="portfolio__item-title">OCCA CUPIDATAT</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
      <div class="portfolio__item-img portfolio__item-img-9" style="height: 570px; max-height: 570px;">
        <div class="portfolio__item-title">OCCA CUPIDATAT</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
    </div>

Необходимо заполнить пространство между первым рядом и вторым рядом, как это сделать - не знаю, прошу знающих помочь

css html grid

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Вот я вам сделал примерно как это должно делаться, а там уже вы сами додумывайте)).

body {
  height: calc(100vh - 20px);
}
.item {
  background-color: gray;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr;);
  grid-template-rows: repeat(9, 1fr);
  gap: 15px;
  height: 100%;
}
.item-1, .item-2 {
  grid-column-start: 1;
}
.item-3, .item-4, .item-5 {
  grid-column-start: 2;
}
.item-6, .item-7 {
  grid-column-start: 3;
}
.item-8, .item-9 {
  grid-column-start: 4;
}
.item-1 {
  grid-row-start: 1;
  grid-row-end: 5;
}
.item-2 {
  grid-row-start: 5;
  grid-row-end: 10;
}
.item-3 {
  grid-row-start: 1;
  grid-row-end: 4;
}
.item-4 {
  grid-row-start: 4;
  grid-row-end: 7;
}
.item-5 {
  grid-row-start: 7;
  grid-row-end: 10;
}
.item-6 {
  grid-row-start: 1;
  grid-row-end: 6;
}
.item-7 {
  grid-row-start: 6;
  grid-row-end: 10;
}
.item-8 {
  grid-row-start: 1;
  grid-row-end: 4;
}
.item-9 {
  grid-row-start: 4;
  grid-row-end: 10;
}

<div class="grid">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
  <div class="item item-6"></div>
  <div class="item item-7"></div>
  <div class="item item-8"></div>
  <div class="item item-9"></div>
</div>

Заполнение пространства в grid-сетке

Ответы