grid

Does CSS Grid Replace Flexbox?

No. Well. Mostly No.

Grid is much newer than Flexbox and has a bit less browser support. That's why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

To put a point on it:

  1. Grid can do things Flexbox can't do.
  2. Flexbox can do things Grid can't do.
  3. They can work together: a grid item can be a flexbox container. A flex item can be a grid container.

(more…)

Building a CSS Grid Overlay

Let's take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as "CSS custom properties"). If you aren't familiar with custom properties, I'd highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou's enlighting talk on using them.

(more…)

Getting Started with CSS Grid

This was a blockbuster week for front-end developers as CSS Grid landed in the latest versions of Firefox and Chrome without a feature flag. That's right: we can now go and play with Grid in two of the most popular browsers right away.

But why is CSS Grid a big deal and why should we care?

Well, CSS Grid is the first real layout system for the web. (more…)

#153: Getting Started with CSS Grid

It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it's becoming something we should learning. I started reading a few posts and playing around with the syntax the past couple of weeks, but asked my fellow CSS-Trickster Miriam Suzanne to grok through it with me on a video hangout.

(more…)

CSS Grid!

Eric Meyer, talking to himself:

How long until I can actually use Grid, then? Two or three years?

March 2017. So about four months from now.

Grid sounds like tables 2.0. I thought we all agreed tables for layout were a bad idea.

We agreed table markup for layout was a bad idea

A Complete Guide to Grid

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).

(more…)

Things I’ve Learned About CSS Grid Layout

The following is a guest post by Oliver Williams. Oliver has been working with CSS grid layout and has learned quite a bit along the way. In this article he's going to hop around to different concepts that he's learned on that journey. I like this idea of learning little bite-sized chunks about grid layout, through isolated examples where possible. That makes learning the whole thing a bit less intimidating.

(more…)

Will we be flattening our HTML for CSS Grids?

I was watching Rachel Andrew talk about CSS Grid Layout yesterday at An Event Apart. Grid is amazing and the day will soon come where it's a dominant web layout tool of choice. That day isn't here yet though, as no stable browser is shipping the latest version of the spec (it's behind a flag at best).

The good news is that, as of just a few days ago, the spec is really stable and has entered "Candidate Recommendation" status. Since all browsers have been developing against the spec, it's likely that widespread non-prefixed ready-to-go support will drop in all stable browsers fairly soon.

The bad news is that it will probably do-so without subgrid support, a point that Rachel underscored well in her talk.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag