Kevin Powell - CommunityKP-C
Kevin Powell - Community•7mo ago•
11 replies
prophile

Dynamic justification based on intrinsic column count

Hello folks! I'm layout something out with CSS Grid: four items. I'm going for a two-column layout on wider viewports, and one-column on narrow viewports. So far so good, including making the switchover intrinsic rather than resorting to media (or container) queries.

The sticking point is that I'm looking to justify the items separately in the two cases. For the one-column layout, I want the items centered or stretched (not fussed either way), but for the two column layout I'd want the left column right-aligned and the right column left-aligned.

ASCII art demonstration:
One-column
+---------------+
|   =========   |
+---------------+
|   =========   |
+---------------+
|   =========   |
+---------------+
|   =========   |
+---------------+

Two-column:
+---------+---------+
|    ==== | ====    |
+---------+---------+
|    ==== | ====    |
+---------+---------+


Is there any way to do this sensibly intrinsically, or do I need to resort to media queries?
Was this page helpful?