CSS Grid Layout is a two-dimensional layout system for the web. It allows developers to create complex layouts using a grid-based approach, which is both flexible and powerful. The grid container holds the grid items and defines the grid structure.

Defining a Grid Container:

To create a grid container, you need to define an element as a grid using the display: grid; property. This element will then act as the container for all the grid items it holds, allowing you to control their layout.

Grid Template Columns and Rows:

Within a grid container, you can define the structure of your grid using grid-template-columns and grid-template-rows. These properties allow you to specify the size and number of columns and rows.

Example of a Grid Container:

Below is a simple example of a grid container with three columns and two rows. The grid items are automatically placed within the grid cells.


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

Using Gap Property:

The gap property is used to define the space between grid items. It can be applied to both rows and columns, providing a neat and organized layout.

Responsive Design with Grid:

CSS Grid is inherently responsive. By using fractional units (fr) and media queries, you can create layouts that adapt seamlessly to different screen sizes.

Conclusion:

CSS Grid is a powerful tool for creating modern web layouts. By understanding and utilizing grid containers, you can design complex, responsive layouts with ease.

Console Output (Rendering):

[Grid Container with Items]