Choose the grid

Flexible grids are foundational elements of responsive design. Using grids to align elements helps establish visual hierarchy. Grid designs look consistent across all devices and are well-organized.

The design starts with a certain number of columns — typically 12. This number is so popular because it can be broken into 2, 3, 4, and 6 columns, allowing for symmetrical or asymmetrical designs. The column width doesn't change. Instead, the number of columns adjusts from 12 on a desktop to 8 on a tablet and 4 on mobile in this particular layout.

There are many different layouts to explore, not just the 12-column grid.^[1] The type you choose will depend on the type of product, content, and technical limitations. Generally, most grids have 60–80px column widths.^[2] Choosing a column width that works for you is the most important decision since it's the main determinant of your content width.