[Resolved] Spacing items in a column

[Author]

Posts

[johnC-6]

Hi,
I created a view for a post grid and I want all the content in each column to be the same height. For example, I want each read link to be evenly aligned regardless of how big the post excerpt is. I tried the following but it's not working:

/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}

/* Create four equal columns */
.column {
flex: 30%;
padding: 10px;
background:white;
margin:0 .5%;
align-items: stretch;
padding:20px;

}

.column img {
width:100%;
margin-bottom:20px;
max-height:200px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {
.column {
flex: 50%;
background:white;
}
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}

Any insight is greatly appreciated.
John

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I'll assume you're referencing the view shown on the homepage, under "MORE POSTS".

The CSS code that you shared will help in making the overall "column" divs to show in the same height, but it will not affect the position of the read more links, within. That is because the title and the excerpt above the read more link can have variable height, based on their length.

To overcome this, it would be best to wrap the content inside the "column" div into another child div "column-inner" and move the read more link out of that child container.

Example:

<div class="column">
    <div class="column-inner">
        <span class="featured">
            <img width="150" height="140" src="" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" loading="lazy">
        </span>
        <a href="">Make the Most of Your Performance Reviews</a>
        <p style="font-size:10px">November 17, 2021//No Comments</p>
        <hr style="border:2px solid #d5d126">
        <p>End of year performance reviews are right around the co…</p>
    </div>

    <a class="read-more-link" href="">Read more</a>
</div>

This will allow you to make the "column-inner" div, the same height, using either CSS 'min-height' or some jQuery code.
( ref: hidden link )

Once the content above the read more link will have the same height, the read more links will align automatically.

I hope this helps and let me know if you need any further assistance around this.

regards,
Waqar

[johnC-6]

My issue is resolved now. Thank you! Much appreciated!