CSS | Grid Layout Module

CSS Grid Layout is a powerful tool for creating responsive layouts with a high level of flexibility and control. It allows developers to divide the screen into rows and columns and position elements within them.

Basic Concepts

The Grid Layout module introduces two new concepts: grid containers and grid items. A grid container is the element that serves as the container for a set of grid items. Grid items are the direct children of a grid container.

To create a grid layout, we first define a grid container using display: grid. Then, we can specify the layout of the grid using various properties like grid-template-columns, grid-template-rows, and grid-gap. We can also position grid items within the grid using grid-column, grid-row, and grid-area.

Examples

Here are some examples of common grid layouts:

1. Basic Grid Layout

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

This creates a basic grid layout with two columns and a 10px gap between them.

2. Responsive Grid Layout

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

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

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

This creates a more flexible grid layout with columns that adjust to the screen size and a 10px gap between them.

Conclusion

CSS Grid Layout is a powerful tool for creating responsive layouts with a high level of flexibility and control. With its many properties and options, developers can create complex grid layouts that adapt to different screen sizes and content.