CSS Layout

Once you have the ability to target html elements for styling, layout is the next core concept to master. Layout involves manipulating how elements lay out on the page. How much space do they take? Are they side by side or on top of each other? How do you manipulate this to create exactly the design you desire? This is an area of CSS that has changed and improved dramatically over the last few years with Flexbox and CSS Grid, but some of the fundamentals (flow and the box model) have remained the same.

Increasingly layouts can be done purely with CSS Grid and Flexbox, but for those who still must support older browsers, grid systems built using Flexbox or even floats are still useful.

Getting Started With CSS Layout | Smashing Magazine

An awesome guide for CSS newbies, but also for anyone who doesn’t feel like they’ve mastered CSS layout or haven’t been keeping up with all the latest developments in CSS Layout. Takes you through the fundamentals of flow on the web, layers in floats and positioning, and then goes through Flexbox and Grid. Excellent.

The Ultimate Guide to Flexbox — Learning Through Examples | Free Code Camp

CSS Grid has stolen a little bit of its thunder, but Flexbox was the biggest innovation in browser layout in a decade, and continues to be a key piece of modern layout techniques. This takes you through all of the various properties with examples.

A Comprehensive Guide to Flexbox Alignment | Tutsplus

Perhaps less addressed than the "flex" sizing components of Flexbox, alignment a key piece of the specification. Flexbox takes certain alignment issues that have been problematic since the beginning of web development and makes them trivial to solve.

Flexbox Froggy

Wonderfully whimsical game that lets you practice your flexbox skills by positioning frogs on lilly pads. Hands down the best "learn by doing" resource out there for Flexbox.

A Beginner’s Guide to CSS Grid | Free Code Camp

Great, simple, and very visual step by step guide to CSS Grid.

A Complete Guide to Grid | CSS Tricks

One of the most thorough online resources available for CSS Grid, shows all of the grid related properties, their potential values, and visual demonstrations of what all of those values do.

Best Practices With CSS Grid Layout | Smashing Magazine

CSS Grid has been around and being used long enough that we’re starting to see some best practices congeal. Rachel Andrew goes through a set of them, informed both by her own experience (she’s one of the foremost advocates and teachers of CSS Grid, and was involved with the spec) and a survey of developers using grid.

Another Collection of Interesting Facts About CSS Grid | CSS Tricks

A set of lessons learned on how to use CSS Grid, some of the shorthand properties, and ways to handle explicit and implicit rows and columns. Filled with codepen-based examples, so you can dig in and tinker with the code to your heart’s content.

Grid Layout Cheatsheet | alsacréations

Simple printable cheatsheet for the basics of grid layout. Extremely readable, perfect if you just want a onepager to have on your desk.

CSS Grid Garden

Another excellent learning game by the same developer as Flexbox Froggy. Learn CSS Grid by positioning carrots in a garden.

How browsers position floats | meowni.ca

While many of us can now use Flexbox and Grid Layout for most of our layouts, there are still sometimes situations where you need to use floats. Or you’re working with an old CSS codebase that has floats all over the place. In those scenarios, it’s super helpful to understand the guts of how the browser treats floats. This is a great visual walkthrough of exactly that, letting you click through to see progressively more ways floats will get treated as you add new floating elements and clears.

Learn CSS Positioning in Ten Steps | BarelyFitz Designs

Step by step tutorial on CSS positioning. A thorough grasp on relative and absolute positioning will give you some serious powers in implementing components. If you don't understand these, you are in danger of spending an awful lot of energy recreating something the browser will do for you.

Z-Index Explained: How to Stack Elements Using CSS | FreeCodeCamp

Z-Index is one of the elements of CSS that seems like it should be straightforward, but there’s all sorts of complications when you start actually using it. Understanding the nuances, particularly the idea of a stacking context, is key to making z-index your friend rather than staring frustrated at your screen. This article does a great job of explaining.

Positioning | MDN web docs

The definitive resource on CSS positioning including Z-index and the new position: sticky .

What’s the Deal with Margin Collapse? | Jonathan Harrell

Margin collapse is a perennial issue when learning CSS layout, and it isn’t always easy to understand. This article does a great job of visually laying out the different ways in which margins can collapse, so if you are a visual learner definitely check this out.