Grid Containers
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system — handling both rows and columns simultaneously — unlike Flexbox which is primarily 1-dimensional.
Grid Items and Positioning
Grid items can be placed anywhere in the grid — on specific cells, spanning multiple columns or rows, or left to auto-place according to the grid algorithm.
Grid Template Areas
grid-template-areas is the most intuitive and visually expressive way to design page layouts. It lets you name regions of the grid and arrange them using an ASCII-art-like map in your CSS.
Grid Code Challenges
From layouts to art — these challenges build Grid mastery. Each one mirrors a real website pattern.
CSS Subgrid
Subgrid is the solution to one of the most frustrating layout problems in CSS: when you have a grid of cards, and each card has multiple rows (image, title, body, button), but the content inside each card doesn't align across cards. Subgrid makes nested elements participate in the parent grid's track sizing.