CSS Layouts

CSS layouts deal with how HTML elements are arranged on the screen. A website can either be arranged in a one-dimensional approach whereby elements are either horizontal or vertical, or in a two-dimensional approach that comprises of both horizontal and vertical arrangements. The features used to accomplish these arrangements are flexbox and grid.

Flexbox

Flexbox is a one-dimensional layout system. This means elements are arranged either horizontally or vertically along a single axis. Flexbox is well-suited for a wide range of layouts — from simple arrangements to complex UI components like navigation bars, card rows, form layouts, and sidebars. The distinction between flexbox and grid is about dimensionality, not complexity.

The three core concepts of flexbox are the flex container, flex items, and axis.

Flex Container

The flex container is the parent element that contains the child elements that will either be vertically arranged or horizontally arranged. It is this container that we apply the code display: flex so the browser knows we are arranging elements in a one-dimensional approach.

Flex Items

Flex items are the children in the parent container (the flex container). They are the items that will either be stacked on top each other vertically, or arranged side by side horizontally.

Axis

Flexbox operates on two axes:

• Main Axis — The primary direction in which flex items are laid out. Controlled by flex-direction: row (horizontal) or flex-direction: column (vertical). By default, the main axis is horizontal.
• Cross Axis — The axis perpendicular to the main axis. If the main axis is horizontal, the cross axis is vertical, and vice versa.

This distinction matters because key flexbox properties are defined relative to these axes. justify-content controls alignment along the main axis, while align-items controls alignment along the cross axis.

Grid

The grid layout is more powerful than flexbox for complex arrangements. While flexbox is one-dimensional, grid is two-dimensional — meaning it controls both horizontal and vertical placement simultaneously. This makes it ideal for web projects with complex layout systems, like Getty Images arranging editorial photos in a structured two-dimensional system instead of just stacking them in a single direction.

Grid Container

Just like flexbox, grid starts with a parent container. Applying display: grid to an element turns it into a grid container, and its direct children become grid items.

Defining Columns and Rows

The core of any grid layout is defining its structure using grid-template-columns and grid-template-rows.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

This creates a grid with 3 columns of 200px each and 2 rows of 100px each. Grid also introduces the fr unit (fractional unit), which divides available space proportionally:

grid-template-columns: 1fr 2fr 1fr;

This creates three columns where the middle column is twice as wide as the other two.

The repeat() Function

Rather than writing column or row values repeatedly, the repeat() function keeps the code concise:

grid-template-columns: repeat(3, 1fr);

This is equivalent to writing 1fr 1fr 1fr and creates three equal columns.

Gap

The gap property defines the space between grid items. It replaces the older grid-gap syntax and can be set for rows and columns independently:

gap: 20px;           /* same gap for rows and columns */
row-gap: 10px;       /* gap between rows only */
column-gap: 20px;    /* gap between columns only */

Placing Items

By default, grid items are placed automatically into the next available cell. However, items can be explicitly placed using grid-column and grid-row:

.item {
  grid-column: 1 / 3; /* spans from column line 1 to column line 3 */
  grid-row: 1 / 2;
}

The span keyword is a more readable alternative:

grid-column: span 2; /* spans across 2 columns */

Grid vs. Flexbox — When to Use Which