CSS Grid Container

The CSS Grid Container is the parent element that defines the grid layout using the display: grid or display: inline-grid property. This container is responsible for establishing a grid formatting context for its child elements, which are automatically turned into grid items.

In this tutorial, you’ll learn how to create a grid container and configure its properties to control the behavior of grid items.

How to Create a CSS Grid Container

To define a grid container, set the display property of a block or inline element to either grid or inline-grid:

Example:

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
.grid-container {
  display: grid; /* Turns the container into a grid */
}

In this example, the <div> element becomes a grid container, and its child elements become grid items.

Key Grid Container Properties

The grid container includes several properties that control how grid items are arranged. These are the most important ones:

1. grid-template-rows and grid-template-columns

Define the structure of rows and columns in the grid container.

Example:

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px; /* Two columns: 100px and 200px */
  grid-template-rows: 150px 150px;    /* Two rows: each 150px */
}

2. gap

Specifies the spacing between grid rows and columns.

Example:

.grid-container {
  gap: 20px; /* Adds 20px space between rows and columns */
}

You can also use row-gap and column-gap to specify gaps independently.

3. justify-items

Aligns grid items horizontally within their cells.

Values:

  • start: Align items to the left of their cells.
  • center: Center items horizontally.
  • end: Align items to the right of their cells.
  • stretch: Stretch items to fill their cells (default).

Example:

.grid-container {
  display: grid;
  justify-items: center;
}

4. align-items

Aligns grid items vertically within their cells.

Values:

  • start: Align items to the top of their cells.
  • center: Center items vertically.
  • end: Align items to the bottom of their cells.
  • stretch: Stretch items to fill their cells (default).

Example:

.grid-container {
  display: grid;
  align-items: start;
}

5. justify-content

Aligns the entire grid horizontally within the container.

Values:

  • start: Align the grid to the left.
  • center: Center the grid horizontally.
  • end: Align the grid to the right.
  • space-between: Distribute extra space between columns.
  • space-around: Distribute extra space around columns.
  • space-evenly: Distribute extra space evenly across columns.

Example:

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

6. align-content

Aligns the entire grid vertically within the container.

Values:

  • start: Align the grid to the top.
  • center: Center the grid vertically.
  • end: Align the grid to the bottom.
  • space-between: Distribute extra space between rows.
  • space-around: Distribute extra space around rows.
  • space-evenly: Distribute extra space evenly across rows.

Example:

.grid-container {
  display: grid;
  align-content: center;
}

Combining Properties: Practical Example

Here’s how you can use multiple grid container properties together:

Example:

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Three columns: flexible widths */
  grid-template-rows: 100px 150px;   /* Two rows: fixed heights */
  gap: 10px;                         /* Gap between rows and columns */
  justify-items: center;             /* Center items horizontally */
  align-items: center;               /* Center items vertically */
}

Output:

  • A grid layout with:
    • 3 columns of varying widths (fractions: 1fr, 2fr, 1fr).
    • 2 rows of fixed heights (100px and 150px).
    • Items centered within their grid cells.

CSS Grid vs. Flexbox

While Flexbox is excellent for one-dimensional layouts (row or column), CSS Grid is better suited for two-dimensional layouts (rows and columns). Use CSS Grid when you need complete control over your layout structure.

Why Use CSS Grid?

  • Effortless Layout Control: Create complex layouts with less code.
  • Responsive Design: Automatically adjust to different screen sizes using fractional units and media queries.
  • Cleaner Code: No need for hacks like floats or inline-block.

For more tutorials and examples, visit The Coding College. Enhance your skills and build professional-grade layouts with CSS Grid today!

Leave a Comment