Нужна помощь в создании определенного фиксированного макета CSS Grid

Question

Я изо всех сил пытался создать этот конкретный макет с помощью CSS Grid.Это нужно исправить, и я пришел, чтобы создать контейнер сетки шириной 1100 пикселей, включая желоба и сайдинг, но пропуски можно игнорировать просто для создания макета.

По сути, это два столбца.Один составляет 75%, а другой - 25%.Есть шесть областей сетки.Что меня озадачивает, так это в отношении разной высоты строк, и если это тот случай, когда создается неявная сетка или нет.

Я разработал то, что я хотел бы, чтобы макет включал фиксированные размеры.Все промежутки составляют 20 пикселей, за исключением внешней левой и правой сторон, которые составляют 40 пикселей, но опять же это можно игнорировать для создания макета.

Разметка выглядит следующим образом:

<div id="page-wrapper">
  <div class="grid-container">

    <div class="1"></div>

    <div class="2"></div>

    <div class="3"></div>

    <div class="4"></div>

    <div class="5"></div>

    <div class="6"></div>

  </div>
</div>

Iпытался явно определить каждую область безрезультатно.Возможно, я что-то упустил.Вот дизайн макета

Любая помощь или указание в правильном направлении относительно стилей будет принята с благодарностью!Спасибо.

Answer 1

Вам необходимо визуализировать макет в виде 3 столбцов и 4 строк.Примерно так:

• 2 столбца по 365 пикселей и еще один по 250 пикселей

• 1 ряд по 200 пикселей, 2 строки по 160 пикселей и еще один последний ряд200px.

Некоторые элементы будут занимать две строки или столбца.

Вот визуальный макет.

Таким образом, ваши столбцы и строки будут:

  grid-template-columns: 365px 365px 250px;
  grid-template-rows: 200px 160px 160px 200px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.grid-container div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border: 1px solid blue;
}

.grid-container {
  display: grid;
  margin: 1em auto;
  grid-gap: 20px;
  border: 1px solid red;
  width: 1100px;
  grid-template-columns: 365px 365px 250px;
  grid-template-rows: 200px 160px 160px 200px;
  padding: 20px 40px;
}

.A1 {
  grid-column: 1 / span 2;
}

.A2 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 2;
}

.A3,
.A4 {
  grid-row: 4;
}

.A5 {
  grid-row: 1 / span 2;
}

.A6 {
  grid-row: 3 / span 2;
}

<div class="grid-container">

  <div class="A1">1</div>

  <div class="A2">2</div>

  <div class="A3">3</div>

  <div class="A4">4</div>

  <div class="A5">5</div>

  <div class="A6">6</div>

</div>

https://codepen.io/Paulie-D/pen/zaxzeK