Как правильно споцизионировать элементы grid?

Question

Как правильно споцизионировать элементы grid?

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

Данные картинки не могу правильно расположить на странице, помогите пожалуйста.

.container {
  margin: 0 auto;
  max-width: 1200px;
}
.grid__list {
  display: grid;
 grid-template-columns: repeat(5, 1fr);
   grid-template-rows: 1fr 1fr;
  column-gap: 30px;
 row-gap: 30px;
}
.item_1 {
  width: 255px;
  height: 500px;
  background-color: black;
  border-radius: 30px 0px;
}
.item_2 {
  width: 255px;
  height: 235px;
  background-color: yellow;
  border-radius: 30px 0px;
}
.item_3 {
 width: 255px;
  height: 235px;
  background-color: yellow;
  border-radius: 30px 0px; 
}
.item_4 {
  width: 540px;
  height: 235px;
  background-color: red;
  border-radius: 30px 0px;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  
}
.item_5 {
  width: 255px;
  height: 500px;
  background-color: black;
  border-radius: 30px 0px;
}

<div class="container">
  <div class="grid__list">
   <div class="grid__item item_1"></div>
   <div class="grid__item item_2"></div>
   <div class="grid__item item_3"></div>
   <div class="grid__item item_4"></div>
   <div class="grid__item item_5"></div>
  </div>
</div>

css html grid

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

Answer 1

▲ 1Принят

Попробуйте вот так:

.container {
  margin: 0 auto;
  max-width: 1200px;
}

.grid__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-gap:30px;
}

.item_1 {
  width: 255px;
  height: 500px;
  background-color: black;
  border-radius: 30px 0px;
  grid-area: 1/1/3/2;
  /*grid-row: 1/3;
  grid-column: 1/2;*/
}

.item_2 {
  width: 255px;
  height: 235px;
  background-color: yellow;
  border-radius: 30px 0px;
  grid-area: 1/2/2/3;
  /*grid-row: 1/2;
  grid-column: 2/3;*/
}

.item_3 {
  width: 255px;
  height: 235px;
  background-color: yellow;
  border-radius: 30px 0px;
  grid-area: 1/3/2/4;
  /*grid-row: 1/2;
  grid-column: 3/4;*/
}

.item_4 {
  width: 540px;
  height: 235px;
  background-color: red;
  border-radius: 30px 0px;
  grid-area: 2/2/-1/4;
  /*grid-row: 2/-1;
  grid-column: 2/4;*/
}

.item_5 {
  width: 255px;
  height: 500px;
  background-color: black;
  border-radius: 30px 0px;
  grid-area: 1/4/-1/-1;
  /*grid-row: 1/-1;
  grid-column: 4/-1;*/
}

<div class="container">
  <div class="grid__list">
    <div class="grid__item item_1"></div>
    <div class="grid__item item_2"></div>
    <div class="grid__item item_3"></div>
    <div class="grid__item item_4"></div>
    <div class="grid__item item_5"></div>
  </div>
</div>

Как правильно споцизионировать элементы grid?

Ответы