Let's get started at the very beginning. How do we construct our first 2x3 grid? This episode will introduce you to a handful of new CSS properties.
View the source code for this first episode on JSBin.
We now have unprecedented control over how we position items within a grid. No longer are we forced to rearrange HTML to a move a region from one position to another. There's literally no limit to how you organize your layouts.
Each grid item can optionally be assigned a grid-area
name. The container can then use these referenced names to construct your desired grid using a more readable convention.
View the source code for this episode on JSBin.com.
When reviewing CSS grid demos, you'll likely come across the new fr
measurement type. This stands for fraction, and allows us to easily specify how much of a grid's remaining available space should be taken up. Let's review a few examples in this episode.
As it turns out, any item within a grid can also serve as its own grid container. This allows for a near infinite array of layout possibilities.
View the source code for this episode on GitHub.
The auto-fill
and auto-fit
keywords offer a lot of flexibility when it comes to dynamically constructing and distributing grid tracks. But, understanding the difference between the two can be tricky. Let's break it down as succinctly as we can.