Vertical alignment of grid items
I don't understand the logic behind vertically aligning elements inline-grid
.
The second example works fine (see code), but the 1st one doesn't. What for? And how could I fix it as shown in the screenshot below?
Also notice.
Instead of using,
display: inline-grid
we can usedisplay: inline-flex
+flex-direction: column
with the same result.Thus, if a task cannot be achieved with help
inline-grid
, perhaps it could be solved withinline-flex
.
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>
source to share
The property applies to items at the row and table level. Default value . As you use this rule is factored into your code. vertical-align
baseline
display: inline-grid
Override the default with vertical-align: bottom
.
.inline-grid {
display: inline-grid;
width: 49%;
vertical-align: bottom; /* new */
}
Additional Information:
- Why is there a vertical scrollbar if parent and child are the same height?
- Why is my textarea higher than its neighbor?
- Secret white space under the image tag
UPDATE (based on comments)
The only problem is that
vertical-align: bottom
(as well as other vertical alignment values) also affects the second example. What I actually want is to align the elements according to the middle red line. (As shown in my screenshot). I don't know, maybe it's just not possible?
Yes it is possible. Here's a revised Grid solution:
.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 images. They may not be needed. I only left them in my answer because they are needed to display the borders correctly (demo?). After removing those wrappers, you can also get rid of the rule vertical-align
in CSS.
source to share
You need to add vertical-align: bottom;
body {
width: 500px;
}
.inline-grid {
display: inline-grid;
width: 49%;
vertical-align: bottom;
}
div {
border: 1px solid red;
}
Here's the JSFIDDLE: https://jsfiddle.net/4sh9oo5k/
source to share