In succession to The Flebox Holy Albatross, Jonathan Snook wondered if he could recreate it using CSS Grid. ℹ️ To recap, with the Flexbox Holy Albatros a layout goes from either all items stacked next to each other (e.g. all horizontal) to all items stack on top of each other (e.g. all vertical): There’s no […]
Tag Archives: grid
CSS Grid: Avengers Magazine Layouts
Really nice CSS Grid demo by Olivia NG. It’s a magazine containing twelve pages on The Avengers: CSS Grid: Magazine Layouts → 💁♂️ Other nice CSS Grid Demos by Olivia include a Floor Plan and an Excel Spreadsheet
CSS Grid Demo: “Kandinsky zum 60. Geburtstag”
Nice work by Tatiana Mac, in which she recreated “Kandinsky zum 60. Geburtstag” by Herbert Bayer using CSS Grid. For comparison, here’s the original: Kandinsky Geburstag Invite on CodePen →
Relearn CSS layout with “Every Layout”
As just announced (on stage) at CSS Day by Heydon himself: If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. […]
CSS Grid Level 2: Subgrid
Good news! Firefox 69 will support subgrid. As Rachel Andrew explains: In terms of new syntax, and new things to learn, this is a very small change for web developers who have learned grid layout. A grid defined as a subgrid is pretty much the same as a regular nested grid, albeit with its own […]
CSS Grid Generator
Sarah Drasner (@sarah_edo), now at Netlify, created a handy tool to visually create CSS Grid Layouts. Handy if you’re not all to familiar with it, yet. CSS Grid Generator →CSS Grid Generator Source (GitHub) →
CSS Grid: Floor Plan
Another CSS Grid Layout by Olivia NG. Be sure to check more CSS Grid Layouts in her CSS Grid Experiments collection on CodePen. Some nce CSS Grid: Floor Plan →CSS Grid Experiments Collection →
CSS Grid: Excel Spreadsheet
Worth a peek, to see how it’s built. I like how the .cells__number cells are locked to the first column, independent of their order in the source code: grid-column: 1 / span 1; CSS Grid: Excel Spreadsheet →
The Layouts of Tomorrow
With CSS Grid being available, Max Böck set out to find himself a layout challenge: I went over to dribbble in search of layout ideas that are pushing the envelope a bit. The kind of design that would make frontend developers like me frown at first sight. He settled on the “Digital Walls” shot (pictured […]
Animate CSS Grid Layouts with animate-css-grid
In a new(ish) web-project I’m working on, I went all-in on CSS Grid. The website contains a page where one can filter the list of elements shown. To animate this filtering I used animate-css-grid, as other libraries typically used for this – e.g. Isotope – don’t play nice with CSS Grid. Installation per NPM/Yarn: yarn […]