1

Добрых времени суток!

Как добиться подобного расположения блоков на grid css? Никак не могу сообразить.

введите сюда описание изображения

3
  • А как уже пытались реализовать? 16 апр 2019 в 6:40
  • @AlexSazonov, никак, вообще не могу понять grid систему.
    – DarkBomb
    16 апр 2019 в 6:46
  • 3
    Ну если ты хочешь, чтоб за тебя тут сделали это, то сори. Но я вот погуглил 5 минут и нашёл отличный гайд. Рекомендую ознакомиться и повыполнять примеры с автором. 16 апр 2019 в 6:52

2 ответа 2

3

Для простоты можно использовать grid-template-areas

.grid {
  display: grid;
  grid-template-areas: 
  'elem1 elem3 elem4 elem5 elem7 elem8'
  'elem2 elem3 elem6 elem6 elem7 elem9';
  grid-gap: 10px;
}

.grid > div {
  display: block;
  width: 100%;
  border: 1px solid #ddd;
  box-shadow: 0 0 3px 0 #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  min-height: 100px;
}

.elem1 {grid-area: elem1;}
.elem2 {grid-area: elem2;}
.elem3 {grid-area: elem3;}
.elem4 {grid-area: elem4;}
.elem5 {grid-area: elem5;}
.elem6 {grid-area: elem6;}
.elem7 {grid-area: elem7;}
.elem8 {grid-area: elem8;}
.elem9 {grid-area: elem9;}
<div class="grid">
  <div class="elem1">1</div>
  <div class="elem2">2</div>
  <div class="elem3">3</div>
  <div class="elem4">4</div>
  <div class="elem5">5</div>
  <div class="elem6">6</div>
  <div class="elem7">7</div>
  <div class="elem8">8</div>
  <div class="elem9">9</div>
</div>

1

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "One Two three four five six" "seven Two eight eight five nine";
}

.One {
  grid-area: One;
}

.Two {
  grid-area: Two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}

.five {
  grid-area: five;
}

.six {
  grid-area: six;
}

.seven {
  grid-area: seven;
}

.eight {
  grid-area: eight;
}

.nine {
  grid-area: nine;
}
<div class="grid-container">
  <div class="One"></div>
  <div class="Two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <div class="six"></div>
  <div class="seven"></div>
  <div class="eight"></div>
  <div class="nine"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.