CSS Grid Layout

CSS Grid creates exact rows and columns for advanced page structures. While Flexbox handles single rows, Grid manages the entire page layout at once. Developers can precisely place elements into specific cells or stretch them across multiple tracks.

1/* grid syntax */
2.grid {
3  display: grid;
4  grid-template-columns: 1fr 1fr;
5}

1/* this creates a simple grid */
2.container {
3  display: grid;
4  grid-template-columns: 200px auto;
5  gap: 15px;
6}