CSS Grid Layout is a powerful two-dimensional layout system for the web. It allows developers to create complex layouts on a grid-based structure, providing more control over both rows and columns.

Key Features of CSS Grid

CSS Grid allows you to define grid areas, align items, and control spacing with ease. It's particularly useful for responsive design, as it can adapt to different screen sizes seamlessly.

Why Use CSS Grid?

Using CSS Grid can simplify the process of creating complex layouts. It reduces the need for floats, positioning, and complicated media queries, making your code cleaner and more maintainable.

CSS Grid vs. Flexbox

While Flexbox is great for one-dimensional layouts (either a row or a column), CSS Grid excels at two-dimensional layouts, allowing for more complex designs.

Browser Support

CSS Grid is supported by all major browsers, including Chrome, Firefox, Safari, and Edge, making it a reliable choice for modern web design.


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  background-color: #444;
  color: white;
  padding: 20px;
  text-align: center;
}

Creating a Basic Grid

To create a basic grid, set the container's display property to grid. Define the number of columns using grid-template-columns and specify the gap between items with the gap property.

Responsive Design with Grid

CSS Grid makes responsive design straightforward. Use media queries to adjust the grid-template-columns for different screen sizes, ensuring your layout looks great on any device.

Console Output:

Grid Layout Example