CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



Grid Container

CSS Grid is a powerful layout system that allows developers to create complex and responsive layouts with ease. The Grid Container is the parent element that holds all the Grid Items, which are the child elements that make up the grid. In this article, we will explore the Grid Container and its properties in detail.

Brief Explanation of Grid Container

The Grid Container is the element that defines the grid. It is the parent element that holds all the Grid Items. The Grid Container is created by setting the display property to grid or inline-grid. Once the Grid Container is created, we can define the number of rows and columns, the size of each row and column, and the gap between them using various properties.

Let's take a look at some of the properties that can be used to define the Grid Container:

  • display: This property is used to create the Grid Container. It can be set to grid or inline-grid.
  • grid-template-rows: This property is used to define the number and size of rows in the grid.
  • grid-template-columns: This property is used to define the number and size of columns in the grid.
  • grid-template-areas: This property is used to define named grid areas, which can be used to place Grid Items in specific locations within the grid.
  • grid-auto-rows: This property is used to define the size of rows that are not explicitly defined in the grid-template-rows property.
  • grid-auto-columns: This property is used to define the size of columns that are not explicitly defined in the grid-template-columns property.
  • grid-auto-flow: This property is used to define the direction in which Grid Items are placed in the grid.
  • grid-gap: This property is used to define the gap between rows and columns in the grid.

Let's take a look at some code examples to see how these properties can be used to create a Grid Container:

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

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

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

In this example, we have created a Grid Container with 6 Grid Items. We have set the display property to grid, which creates the Grid Container. We have then used the grid-template-columns and grid-template-rows properties to define the number and size of rows and columns in the grid. We have set the grid-template-columns property to repeat(3, 1fr), which creates 3 columns with equal width. We have set the grid-template-rows property to repeat(2, 1fr), which creates 2 rows with equal height. We have also set the grid-gap property to 10px, which creates a gap of 10 pixels between rows and columns.

Let's take a look at another example:

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

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

.grid-item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.grid-item:nth-child(2) {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.grid-item:nth-child(3) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.grid-item:nth-child(4) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.grid-item:nth-child(5) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.grid-item:nth-child(6) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

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

In this example, we have created a Grid Container with 6 Grid Items. We have set the display property to grid, which creates the Grid Container. We have then used the grid-template-columns and grid-template-rows properties to define the number and size of rows and columns in the grid. We have set the grid-template-columns property to repeat(3, 1fr), which creates 3 columns with equal width. We have set the grid-template-rows property to repeat(2, 1fr), which creates 2 rows with equal height. We have also set the grid-gap property to 10px, which creates a gap of 10 pixels between rows and columns.

We have then used the grid-column and grid-row properties to place the Grid Items in specific locations within the grid. We have used the nth-child selector to target each Grid Item individually and set its grid-column and grid-row properties accordingly.

Conclusion

CSS Grid is a powerful layout system that allows developers to create complex and responsive layouts with ease. The Grid Container is the parent element that holds all the Grid Items, which are the child elements that make up the grid. By using various properties, we can define the number and size of rows and columns, the gap between them, and the placement of Grid Items within the grid. With CSS Grid, we can create layouts that were previously difficult or impossible to achieve with other layout systems.

References

Activity