Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

Practical CSS Grid: Get started with Grid with practical, reusable code

CSS Grid is taking the design and front-end world by storm. If you’re new to Grid, however, all of the new syntax may make it feel like a closed technology. What’s the difference between grid-template-rows, grid-auto-rows, grid-template-areas, implicit and explicit grids? Where did those “/”s come from? What if I have to support Internet Explorer?

In this workshop, we’ll cover all the basics and advanced maneuvers of Grid in practical, reusable components that build on each other. After half a day with me, you’ll be writing Grid code in your sleep, all while building a sound foundation of practical reusable components that you can implement in any front-end project that comes your way.

Some components we'll be building

  • A fluidly responsive article grid with no breakpoints
  • A grid with items that span different rows AND columns with no additional markup
  • A flexible banner area, ready for customization per page
  • Promotional spaces that change drastically between break points
  • An article view that allows content to break in and out of a standard column of content

Prerequisites: A working knowledge of HTML and CSS. Frustrations with the "old ways" of doing CSS layout.

Preparation: Bring a laptop with FireFox Nightly installed. You don't have to use FireFox, but it's easily the best browser to use to work with Grid.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment