There’s a New Version of the CSS Grid Explained Book

CSS Grid is revolutionizing webdesign

For the last two decades, we’ve relied on CSS to lay out websites, but it has always been missing some key functionality. We’ve relied on workarounds such as tables, floats, and positioning.

CSS Grid is different and better.

CSS Grid allows you to create a grid-based layout system, using columns and rows. You don’t have to use any workarounds. You don’t have to use different hacks for different browsers. You don’t have to install any extra frameworks.

Because it’s such a useful tool, we wrote CSS Grid Explained. CSS Grid Explained is a fun, practical introduction to CSS Grid. This was the 10th book from OSTraining, and also one of our most popular. So we’ve been working on big updates for the book.

First, there’s new content. This week, you’ll find six new chapters in the book. In the next few weeks, look for a second updated for another 6 new chapters!

Second, we opened a Github repo for all the code in the book.

{show access=”14″} {osdownloads download_button.btn.btn-primary 10 “Download”} {show-else} {snippet join-book-club-button} {/show}

About CSS Grid Explained

In this short book, you are going to master the key ideas behind CSS Grid. This book is in the best traditions of OSTraining. There are no long-dense paragraphs of theory. You pick up the book and you start writing code immediately.

In the first chapter, we start with the basic terminology. You’ll learn the difference between Grid Areas and Grid Cells, between Grid Tracks and Grid Gaps.

Then, using a hands-on approach, you’ll start building CSS Grids. There are many different exercises in this book. You’ll build everything from the most basic CSS Grid to a full site layout.

{show access=”14″} {osdownloads download_button.btn.btn-primary 10 “Download”} {show-else} {snippet join-book-club-button} {/show}

CSS Grid Explained Table of Contents

1. Introduction to CSS Grid Terminology
2. Creating Your First CSS Grid
3. Using the Firefox Grid Inspector
4. How to Create Explicit and Implicit Grids
5. How to Use the Autoflow Property in CSS Grid
6. How to Use the FR Unit For Layouts
7. How to Size Tracks with the Auto Keyword
8. How to Size Grid Items with the Span Keyword
9. How to Use Line Numbers in CSS Grid
10. How to Layer Items In CSS Grid
11. How to Use Line Names in CSS Grid
12. How to Place Items with Grid Template Areas
13. How to Use the minmax() Function (new chapter!)
14. How to Use the auto-fill and auto-fit Keywords (new chapter!)
15. The grid-auto-flow: dense Property (new chapter!)
16. How to Align Items in CSS Grid (new chapter!)
17. The justify-content and align-content Properties (new chapter!)
18. How to Nest Grids (new chapter!)