Создание пользовательского макета CSS Grid [закрыто]

L. Grgincic спросил: 10 мая 2018 в 04:15 в: css

После нескольких часов тратить время на то, чтобы настроить эту вещь, я не мог исправить ответ о создании этих "настраиваемых" макетов сетки. Я пробовал самостоятельно, но не приближался к нему.

Я пытаюсь сделать макет, представленный на картинке. Если бы кто-то мог мне помочь, я был бы очень признателен!

ИЗОБРАЖЕНИЕ СЕТКИ СЕТИ


1 ответ

VXp Kadir Bušatlić ответил: 11 мая 2018 в 02:02

Вот что вам нужно:

body {margin: 0}

.grid {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-gap: 10px;
}

.box {
  padding: 20px;
  background: gray;
}

.first {
  grid-row: span 2;
}

.fourth {
  grid-area: span 2 / span 2;
}
<div class="grid">
  <div class="box first">first</div>
  <div class="box second">second</div>
  <div class="box third">third</div>
  <div class="box fourth">fourth</div>
  <div class="box fifth">fifth</div>
</div>

Откорректируйте его в соответствии с вашими потребностями .

Надеюсь, что это поможет.

Дополнительное видео по вопросу: Создание пользовательского макета CSS Grid [закрыто]

CSS Grid #2 Свойство grid template columns и создание 3х колоночного макета

Полный гайд по CSS Grid: адаптивная верстка за пару минут

Верстка сайта с нуля по макету - CSS Grid на практике