🎨 CSS

Flexbox & Grid

Lesson 4 of 5 ~8 min

Modern CSS layout systems make it easy to arrange elements in one dimension (Flexbox) or two dimensions (Grid). Both replace the old float-based hacks with clean, powerful syntax.

Flexbox

Flexbox is designed for laying out items in a single row or column. Set display: flex on a container to activate it.

.container {
  display: flex;
  justify-content: space-between; /* horizontal alignment */
  align-items: center;            /* vertical alignment */
  gap: 16px;                      /* space between items */
}

/* Common properties */
flex-direction: row | column;
flex-wrap: wrap;
flex: 1; /* grow to fill space */

CSS Grid

Grid lets you define rows and columns explicitly — ideal for page layouts and card grids.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  gap: 16px;
}

/* Responsive columns */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Try it yourself

Editor
CSS
Output

Try it

Switch from display: flex to display: grid with grid-template-columns: 1fr 1fr 1fr. See how the layout changes from a row to a grid.

Quiz

Which property creates a flex container?
Challenge

In the editor above, create a 3-column grid layout using display: grid with grid-template-columns: 1fr 1fr 1fr and a gap of 16px.