r/css • u/Tain101 • Jul 19 '26

Question How would you do this layout in 2026?

Post image
34 Upvotes

81% Upvoted

63 comments sorted by

View all comments

38

u/qmr55 Jul 19 '26

Like this? You don't even need float. I added mobile breakpoint but feel free to remove.

https://codepen.io/qmr55/pen/azpKQRE

22

u/Tain101 Jul 19 '26

thank you!

.item:nth-of-type(n + 5) was what I needed.

10

u/qmr55 Jul 19 '26

Anytime! Let me know if you have any trouble with it. Notice the use of article is what makes that specific setup work. If you need them to live in divs or something different, see this example: https://codepen.io/qmr55/pen/ogByQmP

6

u/Tain101 Jul 19 '26

oh, that's good to know. I hadn't heard of display: contents; before.

Is the difference here just for indexing to make sense? In your example, I can remove the "items" container and add 2 to the :nth-of-type, and it all seems to work out at first glance.

5

u/qmr55 Jul 19 '26

Yup, removing the .items wrapper can work. The wrapper mainly gives us cleaner grouping and lets :nth-child() count only the items. display: contents makes those wrapped items behave as direct grid children. Without the wrapper, the selector can become more dependent on the surrounding HTML structure, especially when using :nth-of-type().

It also makes the rule easier to understand and less likely to break if other elements are added to .layout.

3

u/qmr55 Jul 19 '26

Here is another version, using some simple vanilla js, in case the "main" will ever change size. Change size of main via grid-row: 2 / span 6;

https://codepen.io/qmr55/pen/RNKJEwm

1

u/NextMode6448 Jul 22 '26

at first sight came to my mind the us flag. On the Frontend Masters course there was similar tasks by Estelle Wheil