CSS-сетка и линейный дизайн

Question

Я сделал дизайн блога с использованием CSS-сетки, используя inline-block для упаковки DIV-файлов.

В моем блоге у меня есть 2 DIV-изображения высотой 60, которые я хочу показать рядом с текстом.-DIV высоты 120. Рядом с текстом отображается только первая картинка.

Почему вторая картинка показана ниже текста, и, пожалуйста, получите несколько советов о том, как я могу это исправить.

.GridCont {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "content content content content" "content content content content" "content content content content";
}

.PostContent {
  grid-area: content;
  background: #B8E986;
}

.Content {
  background: #000000;
  width: 35%;
  color: white;
  display: inline-block;
}

.box1 {
  height: 120vh;
}

.PicContent {
  background: blue;
  color: white;
  display: inline-block;
}

.pic1 {
  height: 60vh;
  width: 50%;
}

.pic2 {
  height: 60vh;
  width: 45%;
}

.cTextP {
  padding: 20px;
}

<div class="GridCont">
  <div class="PostContent">
    <div class="PicContent pic1">
      <div class="cTextP">Picture #1</div>
    </div>
    <div class="Content box1">
      <div class="cTextP">Content #1</div>
    </div>
    <div class="PicContent pic2">
      <div class="cTextP">Picture #2</div>
    </div>
  </div>
</div>

Код находится на этой JS-скрипке

Answer 1

Это решит вашу проблему:

<div class="grid-container">
  <div class="image1"></div>
  <div class="image2"></div>
  <div class="text"></div>
</div>


.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "image1 image1 text text" "image2 image2 text text";
}

.image1 { grid-area: image1; }

.image2 { grid-area: image2; }

.text { grid-area: text; }

Рабочий пример можно посмотреть здесь: https://codepen.io/dennisperremans/pen/NeqNJp

Answer 2

Почему второе изображение показывается прямо под первым?Для этого нет никаких оснований.

Второе изображение находится во втором ряду.

Второй ряд идет прямо под первым рядом.

Более конкретно, первый рядзанят двумя элементами: изображение # 1 и поле содержимого.Высота первого ряда определяется самым высоким элементом.В данном случае это будет поле содержимого.

Итак, поскольку изображение # 1 не расширяет всю высоту строки # 1, между изображениями будет промежуток.

Вотеще более подробное объяснение проблемы:

• Возможно ли гибкое выравнивание элементов к элементам над ними?

(Этосообщение, связанное с flexbox, но здесь также применима логика.)

Вместо inline-block используйте свойства Grid, чтобы поле содержимого охватывало обе строки:

.PostContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 60vh 60vh;
  grid-gap: 1em;
  grid-template-areas: " pic1 box1 " 
                       " pic2 box1 ";
}

.box1 {
  grid-area: box1;
}

.pic1 {
  grid-area: pic1;
}

.pic2 {
  grid-area: pic2;
}

.PostContent { background: #B8E986; }
.PicContent  { background: blue; color: white; }
.Content     { background: #000000; color: white; }
.cTextP      { padding: 20px;}

<div class="GridCont">
  <div class="PostContent">
    <div class="PicContent pic1">
      <div class="cTextP">Picture #1</div>
    </div>
    <div class="Content box1">
      <div class="cTextP">Content #1</div>
    </div>
    <div class="PicContent pic2">
      <div class="cTextP">Picture #2</div>
    </div>
  </div>
</div>

исправленный jsfiddle

Также обратите внимание, что свойства сетки работают только между родительскими и дочерними элементами.