How to align CMS list images and text in grid?

Design help Layout & Design
1

I have text above each image in the grid that goes to a second line when changing the window width. This pushes down the image and misaligns the grid. How do I keep everything aligned?

Screenshot 2024-09-16 at 4.55.46 PM
Screenshot 2024-09-16 at 4.55.46 PM1173Ă—835 194 KB

Here is my public share link: LINK
Here is the staging: LINK

2

You can set the CMS item to display flex and set the aligment to “space-between”. That will do it.

image
image1920Ă—1131 247 KB

3

Thanks, this worked!

1 Like
4

1. Use Flexbox with align-items: start

Flexbox is great for keeping items aligned, regardless of how the text breaks.

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* Adjust as needed */
  width: 200px; /* Adjust as per your grid layout */
  margin: 10px;
}

In this setup:

  • The grid-container holds the items and uses flex-wrap: wrap to allow items to move to new lines when the screen width changes.
  • The grid-item ensures that the text and image are always aligned, regardless of text wrapping.

2. Set a Fixed Height for Text Block

By setting a fixed height for the text above the image, all grid items will align uniformly even when the text wraps to a second line.

.text {
  height: 50px; /* Set height based on expected text length */
  overflow: hidden;
}

This ensures that the images won’t shift when text goes to a second line.

3. Use CSS Grid with minmax

If you’re using CSS Grid, you can create a grid layout that adjusts automatically while keeping items aligned.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.grid-item {
  display: grid;
  grid-template-rows: auto 1fr; /* Auto for text, 1fr for image */
}

This approach will ensure that the text and images stay aligned while filling the available space.

4. Text Alignment with min-height

Another option is to give the text block a min-height so that even when text breaks into multiple lines, the alignment is maintained.

.text {
  min-height: 60px; /* Adjust based on the expected length of the text */
}

Conclusion

Using Flexbox or CSS Grid with a fixed height or minimum height for the text section should solve the alignment issue and keep your grid tidy as window widths change.

Let me know which approach you’d like to try!