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.