CSS Grid Layout: A Complete Guide

CSS Grid Layout is a powerful tool that allows you to create complex layouts easily and flexibly. In this guide, you will learn how to use CSS Grid Layout to create modern and responsive web page layouts.

Introduction to CSS Grid

CSS Grid Layout is a two-dimensional layout system that allows you to create web page layouts using rows and columns. With CSS Grid Layout, you can create complex and flexible layouts without the need for floats or layout frameworks.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

This grid container will create a grid with three columns and a 10px gap between grid items. You can also use the grid-template-rows property to define the rows of the grid.

Grid Items

Elements inside a grid container are called grid items. You can place grid items on the grid using the grid-column and grid-row properties.

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

This code will place the element in the second and third columns and in the first and second rows of the grid.

Grid Areas

CSS Grid Layout also allows you to define named areas in your grid. This makes it easier to place elements in specific areas of the grid.

.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.item {
  grid-area: content;
}

This code defines a grid container with header, sidebar, content, and footer areas. The element with the item class will be placed in the content area of the grid.

Responsive Grids

CSS Grid Layout is perfect for creating responsive layouts. You can use the minmax() and auto-fill functions to create grids that adapt to different screen sizes.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

This code will create a grid with columns that are at least 200px wide and expand to fill the available space. The auto-fill keyword allows the grid to automatically create new columns as needed.

Browser Support

CSS Grid Layout is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. You can use CSS Grid Layout in your web projects without worrying about browser compatibility.