Tags: grid

75

sparkline

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid – Smashing Magazine

A great example of progressive enhancement in action.

You can perfectly use CSS grid layout today if you don’t expect exactly the same appearance in every single browser, which isn’t possible to achieve nowadays anyway. I’m well aware that this decision isn’t always up to us developers, but I believe that our clients are willing to accept those differences if they understand the benefits (future-proof design, better accessibility and better performance). On top of that, I believe that our clients and users have — thanks to responsive design — already learned that websites don’t look the same in every device and browser.

Is it really safe to start using CSS Grid Layout?

Rachel uncovers a great phrase for dealing with older browsers:

It isn’t your fault, but it is your problem.

She points to multiple ways of using CSS Grid today while still providing a decent experience for older browsers.

Crucially, there’s one message that hasn’t changed in fifteen years:

Websites do not need to look the same in every browser.

It’s crazy that there are still designers and developers who haven’t internalised this. And before anyone starts claiming that the problem is with the clients and the bosses, Rachel has plenty of advice for talking with them too.

Your job is to learn about new things, and advise your client or your boss in the best way to achieve their business goals through your use of the available technology. You can only do that if you have learned about the new things. You can then advise them which compromises are worth making.

How the minmax() Function Works

A great description of one of the most powerful features in CSS Grid.

This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.

An introduction to CSS Grid | Charlotte Jackson, Front-end developer

Charlotte has caught the CSS Grid bug. I absolutely love her step-by-step explanation—it’s really clear, and manages to be brief but thorough at the same time.

It’s time to be more experimental and push the boundaries with layouts.

Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh

A quick visual guide to CSS Grid properties and values.

Griddy

A handy GUI for experimenting with CSS Grid Layout without having to recall the syntax.

CodePen - CSS Grid Template Builder

Here’s a handy interface if you want to get your head around named areas in CSS Grid, also known as doing layout with ASCII art.

Eric’s Archived Thoughts: Grid-Powered Drop Quotes

I’ve been digging into CSS Grid a lot during the past week, so this post from Eric is very timely. On the surface it looks like a fairly simple use case but as you read through the explanation, it starts to become clear that the underlying thinking could be used in a lot of situations.

And, yes, like Eric, I too have been bitten by the Grid bug:

I’m working on my first redesign in a dozen years. If that doesn’t give you some sense of the power of Grid, well, I just don’t know what will.

Grid Garden - A game for learning CSS grid

Its the sequel to Flexbox Froggy—this time it’s grid!

I’m a sucker for CSS gamification.

Questioning Container Queries / Paul Robert Lloyd

Paul’s being contrary again.

Seriously though, this is a good well-reasoned post about why container queries might not be the the all-healing solution for our responsive design problems. Thing is, I don’t think container queries are trying to be an all-encompassing solution, but rather a very useful solution for one particular class of problem.

So I don’t really see container queries competing with, say, grid layout (any more than grid layout is competing with flexbox), but rather one more tool that would be really useful to have in our arsenal.

The benefits of learning how to code layouts with CSS | Jen Simmons

A really inspiring post by Jen outlining all the benefits of the new CSS layout features …and the problems with thinking framework-first.

I know a lot of people will think the “best” way to use CSS Grid will be to download the new version of Bootstrap (version 5! now with Grid!), or to use any one of a number of CSS Grid layout frameworks that people are inevitably going to make later this year (despite Rachel Andrew and I begging everyone not to). But I don’t. The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework. Baked right into the browser.

CSS Grid. One layout method not the only layout method

Grid is only a replacement for float-based layout, where float-based layout it being used to try and create a two-dimensional grid. If you want to wrap text around an image, I’d suggest floating it.

Grid is only a replacement for flexbox if you have been trying to make flexbox into a two-dimensional grid. If you want to take a bunch of items and space them out evenly in a single row, use flexbox.

Browser Support for evergreen websites

Oh, how I wished everyone approached building for the web the way that Rachel does. Smart, sensible, pragmatic, and exciting!

The Futures of Typography

A wonderfully thoughtful piece from Robin, ranging from the printing technologies of the 15th century right up to the latest web technologies. It’s got all my favourite things in there: typography, digital preservation, and service workers. Marvellous!

Eric’s Archived Thoughts: CSS Grid!

Eric is excited about the imminent arrival of grid layout in browsers. And after reading the answers to these sure-to-be-frequently asked questions, you’ll be excited too!

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout – Smashing Magazine

Rachel provides an in-depth comparison between flexbox and grid layout: what they have in common, and what their respective strengths are.

Don’t forget to enable the experiment web features flag in your browser if you want to see the examples in action.

Quantity queries and Flexbox part 2 | Charlotte Jackson, Front-end developer

This is so great! Charlotte takes two previous ideas she’s been writing about (quantity queries and flexbox) and puts them together in a new way.

It took me a while to get around what the nth-child selectors are doing here, but Charlotte does such great job of explaining the CSS that even I could understand it.

Heydon/fukol-grids

The most minimal responsive, flexible grid library you can find. In fact, here’s the whole thing:

.fukol-grid {
  display: flex; /* 1 */
  flex-wrap: wrap; /* 2 */
  margin: -0.5em; /* 5 (edit me!) */
}

.fukol-grid > * {
  flex: 1 0 5em; /* 3 (edit me!) */
  margin: 0.5em; /* 4 (edit me!) */
}

Grid layout is a much needed step-change for CSS | Matt Hinchliffe, Front-End Developer

This is not only a really good explanation of CSS grid layout, it’s also a practical walkthrough, recreating the layout of the Financial Times. I think if I followed along at home, writing the markup and CSS outlined here, it would me to get this stuff “clicking” in my brain.

6 web layout myths busted | Creative Bloq

Jen tackles six aspects of web design that were true …but no longer.

  1. Everything must be a floating bar of soap
  2. Rectangles; only rectangles
  3. We can’t control the fold
  4. 12 columns is best
  5. We have to use a layout framework
  6. We are stuck in a rut because of RWD