Reply To: How to style dynamic data from a relationship ACF field into a two column grid

• CarlParker.dev

• December 16, 2022 at 5:51 am

@whynotadv from what I can gauge, you want it to render more like a grid (2 columns per row) and continuously create new rows after each 2 listings?

OPTION A:

CSS Grid would play perfectly. You can set columns to split evenly in width (grid-template-columns: 1fr 1fr), and after each 2 items css grid would break to a new row automatically for you. Depending on existing styles and so forth, it will take a bit more in CSS, but definitely achievable and pretty straight forward with CSS Grid Layout knowledge.

Which can then be adjusted for mobile responsive when needed. Say when you hit iPad, you can change to grid-template-columns: 1fr (instead of 2 1frs) and now it changes back to a single item per row without having to change any HTML

The other cool thing here is that it can then be configured to have all rows with equal height or they could vary. Up to you.

OPTION B:

You can hack a bit by using a counter in PHP and conditionally add in container stuff after each 2 items, but CSS Grid is way better and so much more flexible.