Vertical alignment of inline-grid elements

Question

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?

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> 

Answer 1

The vertical-align property applies to inline-level and table-cell elements. The default value is baseline . Because you're using display: inline-grid , this rule is factoring into your code.

Override the default with vertical-align: bottom .

.inline-grid {
  display: inline-grid;
  width: 49%;
  vertical-align: bottom; /* new */
}

revised demo

More info:

• Why is there a vertical scroll bar if parent and child have the same height?
• Why is my textarea higher up than its neighbor?
• Mystery white space underneath image tag

---

UPDATE (based on comments)

The only problem, is that vertical-align: bottom (as well as other values of vertical align) also affects second example. What I actually want is to align items according to the middle red line. (As shown in my screenshot). I don't know, maybe it just impossible?

Yes, it's possible. Here's a revised Grid solution:

revised demo

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; grid-gap: 5px; } div > div { border: 1px solid red; } img { vertical-align: bottom; } body { width: 500px; } 

 <div class="grid"> <div><img src="http://i.imgur.com/joY41yV.png"></div> <div>Lorem ipsum</div> <div style="align-self: end;"><code>align-self: end</code> || 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> <div class="grid"> <div><img src="http://i.imgur.com/joY41yV.png"></div> <div style="align-self: start"><code>align-self: start</code></div> <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> 

Note: Consider removing the div wrappers around the images. They may not be necessary. I only left them in my answer because they are needed for properly rendering the (demo?) borders. Once you remove those wrappers, you can also get rid of the vertical-align rule in the CSS.

Answer 2

You have to add vertical-align: bottom;

body {
    width: 500px;
}

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

div {
    border: 1px solid red;
}

Here the JSFIDDLE : https://jsfiddle.net/4sh9oo5k/