Topic: How to align ALL items in grid?

MKJJ
April 17, 2024 at 5:45 am
A very common layout is a grid of elements that contain other elements with different heights. Let’s say, for example, a pricing table. Usually, the alignment is not perfect. One heading might need only one line, the other might need two lines. I’ve never mastered this and use dirty workarounds like min-width etc. A little help would be very appreciated. Let’s take this page as an example (still in development). This is a grid of four columns. The image is no problem, of course, but heading, body text and readmore link do not align properly:

HTML and CSS are pretty straightforward:
```
<div class="grid grid-4 faqs">
<div>
<p><img src="" /></p>
<p><em><strong>Heading</em></p>
<p>Some text ...</p>
<p><a href="">Readmore Link</a></p>
</div>
<div>
<p><img src="" /></p>
<p><em><strong>Heading</em></p>
<p>Some text ...</p>
<p><a href="">Readmore Link</a></p>
</div>
<div>
<p><img src="" /></p>
<p><em><strong>Heading</em></p>
<p>Some text ...</p>
<p><a href="">Readmore Link</a></p>
</div>
<div>
<p><img src="" /></p>
<p><em><strong>Heading</em></p>
<p>Some text ...</p>
<p><a href="">Readmore Link</a></p>
</div>
</div>
```
```
.grid {
    margin: 0 auto;
    display: grid;
    gap: 1rem;
    margin-top: 2em;
}
@media (min-width: 390px) {
.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
```
Is it even possible to align all single elements inside the grid items properly using p tags?

I really tried hard to find an answer, but couldn’t find a solution that addresses this real-life scenario.

Thank you very much in advance for your patience.
David
April 17, 2024 at 6:02 am
Hi there,

you can do this:
```
.grid > div {
    display: flex;
    flex-direction: column;
}
.grid > div > :last-child {
    margin-top: auto;
}
```
To cover:
a container with display flex or grid that has no Alignment set ( eg. align-items: centre ) will resolve all child items to have the same height.
So in this case all your div elements are the same height as the tallest div in that row.

You can then make each div a display flex column, and that affords you the magic of auto top margin on the div last-child which pushes it to the bottom of the container.
MKJJ
April 17, 2024 at 6:10 am

Thanks, David. I appreciate your great support and the explanations a lot. This totally works for the last element. However, there ist still some problem with the heading. With two lines in the heading, the following p tags will not align with the p tags in the other grid items. Would I have to use nested divs here, so that both the heading and the p tag sit in an additional div? Not sure that I can explain this properly. 🙂 If possible I would like to avoid additional divs. This would make editing more difficult for many users (we still use the classic editor).
David
April 17, 2024 at 6:24 am
Ok, so aligning child elements across the grid row is complicated, as there is is no relation between children of sibling grid items.
The only relation is the height of the divs.

The easiest option is to give that element a min-height eg.
```
.grid > div > p:nth-child(2) {
    min-height: 6ex;
}
```
MKJJ
April 17, 2024 at 6:37 am

Thanks again, David. I’m relieved that even you find this complicated. But I had to look up the ex unit. Have never used it before. 🙂 This solution it totally fine.

Thanks a bunch!
David
April 17, 2024 at 6:52 am

For some reason i seem to always go to the ex unit for this kind of thing when it involves the height of text… its kinda fun 🙂

Glad to be of help!
MKJJ
April 17, 2024 at 7:23 am
A funny postscript: The same problem occured with a list of events. I hate the event calendar plugin from the bottom of my heart, but my customer wants to use it. The source code is so absurdedly bloated that I asked the support to fix the problem for us, since this is a paid plugin! I stated clearly that I don’t want to use static height. This was the proposed solution:
```
.tribe-events-widget-events-list__events article.tribe-events-widget-events-list__event { 
    height: 170px !important; 
}
```
That’s impressive, isn’t it. 🙂
David
April 18, 2024 at 2:54 am

Yep , cannot get more fixed then that lol

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

How to align ALL items in grid?