Training Trains Internship
Student login
← HTML & CSS learning path
HTML & CSS · Module 8 of 10

CSS Grid layout

Build two-dimensional layouts with rows and columns.

📖 Key ideas

  1. display: grid makes a grid container.
  2. grid-template-columns: repeat(3, 1fr) makes three equal columns.
  3. fr shares free space; gap sets gutters.
  4. repeat(auto-fit, minmax(200px, 1fr)) makes responsive cards without media queries.
  5. Items can span: grid-column: span 2.
💡 Real-life example: Grid is like a cinema hall: rows and seat numbers, and some seats can be wide (span).
display: gridTurns on grid layout
frFraction of free space
minmax()Size between a minimum and maximum
spanItem covers several columns or rows