Modern CSS Layout Overview

Despite this evolution, Modern CSS layout methods resemble “hacks” (such as pages arranged in tables or used floats) toward the “power-house” layout mechanisms. These are, today, the two main players in layout design:

Today, developers primarily use two powerful systems for modern CSS layout: Flexbox and CSS Grid. Using Flexbox will make your page easy to use and easy to work with in a one-dimensional way (be using navigation bars or just how elements are centered on the page). CSS Grid is even more powerful: it defines both rows and columns at the same time for the entire page “skeleton” and, when combined with units like fr (fractions of a grid) and gap (space between elements), makes for a perfectly fluid design that scales to any size without the “hacks” of the past.

1. The Big Two: Flexbox vs. Grid

The most important thing to understand is the “axis” rule.

Flexbox (1D Layout)

Flexbox is best suited for distributing items along a single line, either as a row or a column. It works well in small components such as navigation bars, a header, or to middle a single element.

• Main Idea: You give a parent container display: flex;.
• Alignment: You use justify-content to move items along the main line (left/right) and align-items to move them across it (up/down).
• Flexibility: Items can “flex” to fill space or shrink to fit.

CSS Grid (2D Layout)

Grid is built for two dimensions; rows and columns at the same time. It is what you need if you want to create the overall “skeleton” of a webpage.

• Main Idea: You define a “map” of where things go using display: grid;.
• Control: You can specify exactly how many columns you want (e.g., grid-template-columns: 1fr 2fr 1fr;) and the gaps between them.
• Layering: In Grid its also really easy to layer items, whereas in Flexbox you don‘t have the ability to do this.

2. Modern Spacing: The gap Property

Because in our previous design we used margin to add whitespace between elements, that was a frequent source of headaches for us when aligning items. We now use the gap property.

• It works in both Flex and Grid.
• It only puts space between items, not on the outer edges.

3. Responsive Design: Beyond Media Queries

Media Queries (using @media) are still needed for changing the layout depending on the size of the display. However, some of the computations can now be handled by the browser where the current CSS specification states:

4. When to Use Which?

• Use Flexbox when: You have a list of items and you just want them to sit nicely in a row or stack, or when you need to perfectly center something.
• Use Grid when: You are building a full page layout with headers, sidebars, and footers, or when you need items to align perfectly in both directions.

Summary Table

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.