Introduction to CSS Grid Container

CSS Grid Container

CSS Grid is a powerful layout system in CSS that allows you to create complex, multi-dimensional layouts with ease. In CSS Grid, the container element is defined as a grid container, and it is responsible for defining the grid layout and its properties.

To create a grid container, you can set the display property to grid or inline-grid.

As an example:

.container {
     display: grid;
}

Once the container element is defined as a grid container, you can use various properties to control the layout and sizing of its grid items, such as grid-template-columns, grid-template-rows, grid-template-areas, grid-column-gap, grid-row-gap, and grid-gap.

As an example:

.container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-column-gap: 20px;
     grid-row-gap: 20px;
}

Example

Here's an example of a grid container using HTML and CSS:

Editor

Loading...

In this example:

• We have created a grid container with a class of grid-container. The display: grid; property sets the container to be a grid.
• The grid-template-columns: repeat(3, 1fr); property specifies that the grid should have three columns with each column taking up an equal amount of space.
• The grid-gap: 10px; property sets the gap between the grid items to be 10 pixels.
• We have also created grid items with a class of grid-item. These items are the individual cells within the grid.
• The background-color, border, padding, font-size, and text-align properties are used to style these items.

The grid-template-columns Property

The grid-template-columns property takes one or more values, each of which represents the width of a single column. Values can be specified using various units such as pixels, percentages, or fractions (using the fr unit).

As an example:

.grid-container {
     display: grid;
     grid-template-columns: 100px 1fr 2fr;
}

In this example:

• The first column is 100 pixels wide, and the second and third columns have a flexible width that will fill the remaining space in a 3:2 ratio (2/3 for the third column and 1/3 for the second column).

You can also use keywords such as repeat and auto-fit to create a more flexible grid layout. For example, to create a grid with 4 equal columns, you can use the following code:

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

In this example, the minmax function is used to set a minimum and maximum width for each column, and the auto-fit keyword is used to automatically adjust the number of columns to fit the available space, while ensuring that each column is at least 200 pixels wide.

The grid-template-rows Property

The grid-template-rows property takes one or more values, each of which represents the height of a single row. Values can be specified using various units such as pixels, percentages, or fractions (using the fr unit).

As an example:

.grid-container {
     display: grid;
     grid-template-rows: 100px 1fr;
}

In this example:

• The first row is 100 pixels tall, and the second row has a flexible height that will fill the remaining space.

You can also use keywords such as repeat and auto-fit to create a more flexible grid layout.

As an example:

.grid-container {
     display: grid;
     grid-template-rows: repeat(4, 1fr);
}

In this example:

• The repeat function is used to repeat the 1fr value 4 times, creating 4 equal rows.

You can also use the grid-auto-rows property to define the height of rows that are created implicitly when more grid items are added to the grid than there are rows defined in the grid-template-rows property.

As an example:

.grid-container {
     display: grid;
     grid-template-rows: 100px 1fr;
     grid-auto-rows: 50px;
}

In this example:

• The first row is 100 pixels tall, the second row has a flexible height that will fill the remaining space, and any additional rows that are created implicitly will have a height of 50 pixels.

Example

Here's an example of using grid-template-rows property:

Editor

Loading...

In this example:

• We have created a grid container with a class of grid-container.
• The display: grid; property sets the container to be a grid.
• The grid-template-columns: repeat(3, 1fr); property specifies that the grid should have three columns with each column taking up an equal amount of space.
• The grid-template-rows: 100px 200px 1fr; property specifies that the grid should have three rows, where the first row is set to have a height of 100px, the second row is set to have a height of 200px, and the third row is set to take up the remaining space using the 1fr unit.
• We have also created grid items with a class of grid-item. These items are the individual cells within the grid.
• The background-color, border, padding, font-size, and text-align properties are used to style these items.
• Inside the container, we have nine grid items, which will automatically be arranged into the grid based on the grid-template-columns and grid-template-rows properties.

The justify-content Property

The justify-content property is a CSS property used in a grid container to align the grid items along the horizontal axis (or main axis) of the grid. It controls the distribution of extra space between and around the grid items in the grid container.

The justify-content property can take several values:

• flex-start: aligns the grid items to the left of the grid container

• flex-end: aligns the grid items to the right of the grid container

• center: aligns the grid items at the center of the grid container

• space-between: distributes the grid items evenly with equal space between them, but no space at the outer edges of the container

• space-around: distributes the grid items evenly with equal space around them, including space at the outer edges of the container

• space-evenly: distributes the grid items evenly with equal space around them, including space at the outer edges of the container and between each item.

As an example:

.grid-container {
     display: grid;
     grid-template-columns: repeat(3, 100px);
     justify-content: center;
}

In this example:

• The justify-content property is set to center, which will align the grid items at the center of the grid container.

You can also use the justify-items property to align the individual grid items within the grid cells, and the justify-self property to align a specific grid item within its cell.

Example

Here's an example of using justify-content property:

Editor

Loading...

In this example:

• We have created a grid container with a class of grid-container. The display: grid; property sets the container to be a grid.
• The grid-template-columns: repeat(3, 1fr); property specifies that the grid should have three columns with each column taking up an equal amount of space.
• The grid-template-rows: 100px 200px 1fr; property specifies that the grid should have three rows, where the first row is set to have a height of 100px, the second row is set to have a height of 200px, and the third row is set to take up the remaining space using the 1fr unit.
• We have also created grid items with a class of grid-item. These items are the individual cells within the grid. The background-color, border, padding, font-size, and text-align properties are used to style these items.
• The justify-content: center; property centers the grid items horizontally within the grid container.
• Inside the container, we have nine grid items, which will automatically be arranged into the grid based on the grid-template-columns and grid-template-rows properties.

The align-content Property

The align-content property is a CSS property used in a grid container to align the grid items along the vertical axis (or cross axis) of the grid. It controls the distribution of extra space between and around the grid items in the grid container.

The align-content property can take several values:

• flex-start: aligns the grid items to the top of the grid container

• flex-end: aligns the grid items to the bottom of the grid container

• center: aligns the grid items at the center of the grid container

• space-between: distributes the grid items evenly with equal space between them, but no space at the outer edges of the container

• space-around: distributes the grid items evenly with equal space around them, including space at the outer edges of the container

• space-evenly: distributes the grid items evenly with equal space around them, including space at the outer edges of the container and between each item.

• stretch: stretches the grid items to fill the container vertically (this is the default value).

As an example:

.grid-container {
     display: grid;
     grid-template-rows: repeat(3, 100px);
     align-content: center;
}

In this example:

• The align-content property is set to center, which will align the grid items at the center of the grid container along the vertical axis.

You can also use the align-items property to align the individual grid items within the grid cells, and the align-self property to align a specific grid item within its cell.

Example

Here's an example of using the align-content property:

Editor

Loading...

In this example:

• We have a div element with a class of "grid-container" that contains nine div elements with a class of "grid-item".
• The "grid-container" element has a display property of "grid", which creates a CSS Grid layout.
• The grid-template-columns property is set to "repeat(3, 1fr)", which creates three columns with equal widths.
• The grid-template-rows property is set to "repeat(3, 100px)", which creates three rows with a height of 100 pixels.
• The grid-gap property is set to 10 pixels, which adds spacing between the "grid-item" elements.
• The align-content property is set to "space-around", which distributes the space evenly between the rows and adds equal spacing between each row.
• The grid-item elements have a background color of "#ccc", padding of 20 pixels, a font size of 30` pixels, and text centered.