Layouts with Flexbox & Grid

Introduction

Layout is how elements are arranged.

Flexbox (1D layout)

.container {
  display: flex;
  justify-content: space-between;
}

Grid (2D layout)

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

When to use

• Flexbox → rows or columns

• Grid → full page layouts

Recap

Flexbox + Grid = modern layout power.