Skip to main content
CSS is fun and cool and I like it.
Snippet

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 element’s children (which become Grid Items).… Read article “A Complete Guide to Grid”

Article

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.Read article “Things I’ve Learned About CSS Grid Layout”

Article

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” … Read article “Will we be flattening our HTML for CSS Grids?”

Link

Should I use Grid or Flexbox?

Article

Build Web Layouts Easily with Susy

Susy provides you with the tools to build your own grid layouts that match the needs of your website. It gives you the freedom and flexibility to build any design that you can imagine. It doesn’t matter if your design has 5, 14 or 48 columns. Unequal width columns? Susy’s got you covered.

Why would you pick Susy over the million other frameworks out there on the internet? You may never even heard of it before. What if it’s beauty … Read article “Build Web Layouts Easily with Susy”

Almanac

grid-template-columns / grid-template-rows

The grid-template-rows and grid-template-columns properties are the primary CSS properties for establishing a grid layout, once the element is a grid context (display: grid;).

There are also -ms-grid-columns and -ms-grid-rows, which are the old IE version of this. You may want to consider Autoprefixing to get them, or not, your call. There was also a weird period where they were grid-definition-columns and grid-definition-rows, but that’s not a thing anymore.

Here’s an example derived from Microsoft’s Read article “grid-template-columns / grid-template-rows”

Almanac

grid-row / grid-column

The grid-row and grid-column properties define which row or column an element will be displayed on.

.element {
  grid-row: 1 / 2;
  grid-column: 3 / -1;
}

Here’s an explicit 3 × 3 grid where these properties are used to place grid items onto it in specific places:

CodePen Embed Fallback Related Browser Support… Read article “grid-row / grid-column”