Skip to main content
Guide Collection

The Different Kinds of CSS Layout

Trying to learn layout on the web? We've picked out some of the best articles on CSS-Tricks covering layout for you here.

Monthly Sponsor
Thanks, Shutterstock!
Snippet

A Complete Guide to Grid

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that […]

Snippet

A Complete Guide to Flexbox

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

Article

A Complete Guide to the Table Element

The <table></table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article, we’re going to look at how to use them, when to use them, and everything else you […]

Article

All About Floats

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”.

Article

Centering in CSS: A Complete Guide

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach for. So […]

Article

Don’t Overthink It (Flexbox) Grids

Four years ago I posted “Don’t Overthink it Grids” and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week. That article was my way of saying: “Fear not! You can make a grid yourself! You […]

Article

Don’t Overthink It Grids

The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a “main content area” floated to the left a “sidebar” floated to the right, it’s a simple grid. If a more complex layout presents itself, people often reach for a grid […]

Video

#115: Don’t Overthink It Grids

Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid. There are new layout methods in CSS that are getting closer to prime time (like flexbox and grid layout) that will be very great for grids, but for now, […]

Article

Filling the Space in the Last Row with Flexbox

Chris Albrecht posted a question on StackOverflow about grids. Essentially: imagine you have an element with an unknown number of children. Each of those children is some percentage of the width of parent such that they make equal rows, like 25% wide each for four columns, 33.33% wide each for three columns, etc. The goal […]

Article

Designing A Product Page Layout with Flexbox

Every day at Shopify I speak with Partners who are constantly pushing the boundaries of what’s possible in ecommerce design. Recently, I’ve noticed a number of designers are experimenting with Flexbox in their stores. As web designers and developers, one of our primary goals is to bring focus to content and make it easy for […]

Article

Flexbox Bar Navigation Demo

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general. But I’ve been enjoying tinkering with flexbox, so I decided to toss it together […]

icon-link icon-logo-star icon-search icon-star