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.
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.
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.
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.
- Understanding CSS Grid: Creating A Grid Container
- Understanding CSS Grid: Grid Lines
- Native CSS Masonry Layout In CSS Grid
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
- MDN: Learn CSS Layout By MDN
- Grid by Example By Rachel Andrew
