CSS grid and inline-block design issue

Question

I have made a blog design using CSS grid, having used inline-block to pack DIVs together.

In my blog I have 2 picture-DIVS of height 60 that I want to show next to a text-DIV of height 120. Only the first picture is shown next to the text.

Why is the second picture shown below the text, and please get some pointers on how I can fix this.

.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>

Code is at this JS-fiddle

Michael Benjamin · Accepted Answer · 2018-12-11T15:41:02.643

Why would the second image show right beneath the first? There is no reason for that.

The second image is on the second row.

The second row goes right beneath the first row.

More specifically, the first row is occupied by two elements: image #1 and the content box. The height of the first row is defined by the tallest element. In this case, that would the content box.

So, because image #1 doesn't extend the full height of row #1, there will be a gap between images.

Here's an even more detailed explanation of the problem:

Is it possible for flex items to align tightly to the items above them?

(It's a flexbox-related post, but the logic applies here, as well.)

Instead of inline-block, use Grid properties to get the content box to span both rows:

.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>

revised jsfiddle

Also note that grid properties work only between parent and child elements.

Dennis · Answer 2 · 2018-12-11T15:43:35.427

This will fix your problem:

<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; }

You can see the working example over here: https://codepen.io/dennisperremans/pen/NeqNJp

CSS grid and inline-block design issue

2 Answers2