Vertical alignment of inline-grid elements

user_5587480 0
Viewed 1409

I don't understand the logic of vertical alignment of inline-grid elements.

The 2nd example works fine (see the code), but the 1st is not. Why? And how I could fix it, as shown below in screenshot?

enter image description here

Also note.

Instead of using display: inline-grid, we can use display: inline-flex + flex-direction: column with the same result.

Thus, if the task could not be achieved with inline-grid, probably it could be solved using inline-flex.

For ones, who prefer jsFiddle

body {
 width: 500px;
}

.inline-grid {
 display: inline-grid;
 width: 49%;
}

div {
 border: 1px solid red;
}
<h3>not ok</h3>

<div class="inline-grid">
<div><img src="http://i.imgur.com/joY41yV.png"></div>
<div>Lorem ipsum</div>
</div>

<div class="inline-grid">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>Lorem ipsum</div>
</div>

<hr>

<h3>ok</h3>

<div class="inline-grid">
<div><img src="http://i.imgur.com/joY41yV.png"></div>
<div>Lorem ipsum</div>
</div>

<div class="inline-grid">
<div><img src="http://i.imgur.com/joY41yV.png"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

css-grid css html
2 Answers
Related