The Web: HTML & CSS
🔲 CSS Grid
Two-dimensional layouts with CSS Grid: grids, item placement, areas and responsive design without media queries.
What you'll learn
- Build two-dimensional grids with
display: grid,grid-template-columns/rows, thefrunit andgap - Place items by lines and with
spanusinggrid-columnandgrid-row - Lay out readable pages with
grid-template-areasandgrid-area - Create responsive card galleries without media queries using
repeat(),minmax()andauto-fit
Lessons
Basic grid: rows, columns and the fr unitdisplay: grid, grid-template-columns/rows, the fr unit and gap. Placing items: lines, span and areasgrid-column, grid-row, span and grid-template-areas + grid-area. Responsive without media queries: auto-fit and minmaxrepeat(), minmax() and auto-fit / auto-fill for fluid cards.Practice this module in the app
DevPath is a hands-on course: you read the theory here; in the app you put it into practice with exercises that really run, offline.
Start free in the app →