grid Archives - CSS-Tricks

Naming Things is Only Getting Harder

# June 21, 2017 By Geoff Graham

I was working with CSS Grid and came to the grid-column and grid-row properties. I paused for a moment.

They're not overly complicated. They are shorthand properties for expressing where an element should start and end on a grids defined columns and rows.

What caught me was the fact that I can name these lines. (more…)

grid naming

How the minmax() Function Works

# June 16, 2017 By Robin Rendle

Another swell post by Ire Aderinokun, this time on the curious minmax() CSS function and how it works alongside the CSS Grid features that we've been experimenting with lately.

What's especially great here is the examples where Ire explains how we can avoid media queries altogether. With just a couple of lines of CSS we can now build pretty complicated layouts.

grid minmax

Breaking Out with CSS Grid Explained

# June 6, 2017 By Geoff Graham

Tyler Sticka shared a slick technique for breaking out content in a CSS Grid layout, but Rachel Andrew goes the extra mile to explain why the technique works:

When you name lines, you can optionally name them as *-start and *-end and this gives you a little more grid magic. We get a named grid area of the main name used. Sounds odd? Take a look at the diagram below, it shows 4 named grid lines, main-start and main-end both for columns and rows. The area marked out by the intersection of these lines can now be referenced by the name main. If we had named the lines foo-start and foo-end then we would have a named area called foo.

(more…)

grid

Does CSS Grid Replace Flexbox?

# March 31, 2017 By Robin Rendle

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:

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

(more…)

flexbox grid

Building a CSS Grid Overlay

# March 27, 2017 By Andreas Larsen

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…)

grid overlay repeating gradient

Getting Started with CSS Grid

# March 13, 2017 By Robin Rendle

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…)

grid layout

#153: Getting Started with CSS Grid

# February 20, 2017 By Geoff Graham

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…)

grid

CSS Grid: One Layout, Multiple Ways

# February 17, 2017 By Geoff Graham

I've really been enjoying getting acquainted with CSS Grid. The feature is starting to ship in many browsers and it looks like we'll be able to start using it in production in due time.

(more…)

grid holy grail