Skip to main content Jump to list of all articles Jump to all topics

A Smashing Guide to CSS Layout

CSS Layout has been transformed over the past years. We have you covered with all you need to master this new world. If you want to understand the technical details, or learn how to use new CSS creatively, these guides can help.

Cat the Yoda, with a sword

How To Learn CSS

If you haven't taken a look at CSS for a while, then this article is a good place to start. It covers a lot of the fundamentals of modern CSS. Check that you know the basics as they are today before diving into the rest of the content.

How To Learn CSS

Getting Started With CSS Layout

This guide walks you through the various layout methods in CSS, explaining what they are, how to use them, and the tasks they are best suited for.

Getting Started With CSS Layout

The Display Property

The series Digging Into The Display Property takes an in-depth look into display, the property that allows us to change the way elements look on our pages. The display property has been refactored recently to accept two values — an inner and an outer values. Understanding this change can help to explain many layout mysteries.

CSS Grid Layout

CSS Grid Layout means that we can create a grid in CSS and position items upon it, or rely on auto-placement to lay our items out in rows and columns.

Jen Simmons: Thinking With Grid

Recorded at SmashingConf San Francisco 2019

Jules Forrest: For The Love Of The Grid

Recorded at SmashingConf Toronto 2019

Flexbox

Flexbox was designed for one-dimensional layout, laying things out as a row or as a column. It is really great for laying out small interface items which do not need to be in a strict grid, and where you want the content size to dictate the layout.

Key Layout Concepts

While Flexbox and Grid are the headline features, there are a number of important concepts which are vital to understand if you really want to master CSS Layout.

Inspired Design Decisions

If you haven't taken a look at CSS for a while, then this article is a good place to start. It covers a lot of the fundamentals of modern CSS. Check that you know the basics as they are today before diving into the rest of the content.

More Resources