Keir Watson

Responsive Grid Magazine Layout in Just 20 Lines of CSS

https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/

Interesting dive into some of CSS Grid subtleties, to build a nice magazine layout.

Incredibly, this layout only took 21 lines of CSS (excluding global content styling). However, to achieve such flexibility in such a few lines of code, I had to dig deep into the more obscure parts of some of CSS Grid and learn how to work around some of its inherent limitations.

older link:
Google’s new reCAPTCHA has a dark side
newer link:
Chameleonic Header

Brad Frost

Layout & Grid in Design Systems
- Nicolas Hoizey
- 27 November 2022
- Grid, CSS, Design System
- 6 reactions
This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process,…
Donnie D'Amato

gridless.design
- Nicolas Hoizey
- 27 November 2022
- Grid, Flexbox, CSS, layout
- 11 reactions
The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how…
Trys Mudford

It's all about that space
- Nicolas Hoizey
- 26 November 2022
- CSS, Grid
- 2 reactions
Yet another great Utopia tool, this time for grids, but the right way: the 12 column grid itself is an illusion, or at best a fading artefact of the…
Hubert Sablonnière

Prevent layout shifts with CSS grid stacks
- Nicolas Hoizey
- 27 July 2022
- CSS, Grid, CLS, Core Web Vitals, WebPerf
- 22 reactions
I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links! 😎 No more layout shifts! Compared…
Ahmad Shadeed

The Minimum Content Size In CSS Grid
- Nicolas Hoizey
- 30 January 2022
- CSS, Grid
- 7 reactions
Sometimes, while building a component, you suddenly notice a weird horizontal scroll bar. You keep trying and fixing the wrong thing, only to realize…

Responsive Grid Magazine Layout in Just 20 Lines of CSS

Related contents with similar topics