GoCareerGo Tutorials

CSS Tutorial

Selectors, box model, Flexbox, Grid, animation and responsive design.

CSS Grid Layout

A two-dimensional layout system — define rows AND columns at once, then place items into that grid.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}
.item {
  grid-column: span 2;
}

Tip

Rule of thumb: Flexbox for one-dimensional layout (a row OR a column), Grid for two-dimensional layout (rows AND columns).