Skip to main content

Grid Container

The grid container in CSS Grid Layout serves as the foundation for creating a grid-based layout. It defines the grid structure and controls the layout of its immediate child elements, known as grid items.

How to Define a Grid Container​

To define an element as a grid container, you set its display property to grid or inline-grid.

/* Block-level grid container */
.container {
  display: grid;
}

/* Inline-level grid container */
.inline-container {
  display: inline-grid;
}

grid-template-columns and grid-template-rows​

The grid-template-columns and grid-template-rows properties are fundamental to defining the structure of a CSS Grid layout. They specify the sizes of the grid's columns and rows, respectively.

grid-template-columns​

This property defines the size of each column in the grid. You can specify sizes using various units like pixels (px), percentages (%), and fractions (fr).

/* Three columns: 100px, 1 fraction, and 30% of the container width */
.container {
  grid-template-columns: 100px 1fr 30%;
}

Using the repeat() function​

To simplify the definition of multiple columns with the same size, you can use the repeat() function.

/* Four columns each of 1fr */
.container {
  grid-template-columns: repeat(4, 1fr);
}

Using auto-fill and auto-fit​

These keywords can be used with repeat() to create a responsive grid layout that adjusts based on the container size.

/* Creates as many 200px columns as will fit in the container */
.container {
  grid-template-columns: repeat(auto-fill, 200px);
}

grid-template-rows​

This property defines the size of each row in the grid. Like grid-template-columns, you can specify sizes using various units.

/* Two rows: one of 100px and another taking up the remaining space */
.container {
  grid-template-rows: 100px 1fr;
}

Using the minmax() function​

The minmax() function allows you to specify a size range for your rows or columns.

/* Rows should be at least 100px but can grow to 1fr */
.container {
  grid-template-rows: minmax(100px, 1fr);
}

Combined Usage​

Both grid-template-columns and grid-template-rows can be used together to define a grid's complete structure.

.container {
  grid-template-columns: 100px 1fr 30%;
  grid-template-rows: 100px 1fr;
}

Best Practices​

  • Responsive Design: Use responsive units like fr or minmax() to make your grid adapt to different screen sizes.
  • Code Readability: If your grid definition is complex, consider adding comments to make it easier to understand.
  • Optimization: Use the repeat() function to avoid repetitive code and make your CSS more maintainable.

grid-template-areas​

The grid-template-areas property in CSS Grid Layout is a powerful feature that allows you to create complex layouts by naming and organizing areas within your grid.

Basic Usage​

The grid-template-areas property is used to define a grid template by assigning names to different areas of the grid. These names can then be referenced by grid items to place them in the corresponding areas.

Here's a simple example:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

In this example, the grid is divided into areas named header, sidebar, content, and footer. Each string represents a row, and within that row, each name represents a cell.

Assigning Grid Items to Areas​

Once you've defined your grid areas, you can assign grid items to these areas using the grid-area property:

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

Advanced Usage​

Spanning Multiple Cells​

You can make an area span multiple cells by repeating its name:

grid-template-areas:
  "header header header header"
  "sidebar content content content"
  "sidebar footer footer footer";

Empty Cells​

You can leave a cell empty by using a period (.):

grid-template-areas:
  "header header ."
  "sidebar content .";

Nested Grids​

You can also nest one grid inside another. In this case, the inner grid can have its own grid-template-areas.

Best Practices​

  1. Semantic Naming: Use meaningful names for your grid areas to make your layout more understandable.
  2. Responsiveness: You can redefine grid-template-areas within media queries to create responsive layouts.
  3. Code Comments: For complex layouts, consider adding comments to explain the structure.

Limitations​

  1. Rectangular Areas: All named areas must form a rectangular shape.
  2. No Overlapping: Named grid areas cannot overlap.

Grid Gap​

The grid-gap property in CSS Grid Layout is used to set the spacing between grid rows and columns. It's a shorthand property that combines grid-row-gap and grid-column-gap.

Basic Usage​

The grid-gap property can take one or two values:

  • One Value: Sets the gap between both rows and columns. 
    .container {
      grid-gap: 20px;
    }
  • Two Values: The first value sets the row gap, and the second sets the column gap. 
    .container {
      grid-gap: 20px 30px;
    }

Individual Gap Properties​

You can also set the row and column gaps individually using grid-row-gap and grid-column-gap.

.container {
  grid-row-gap: 20px;
  grid-column-gap: 30px;
}

Units​

The gap can be defined using various units such as pixels (px), percentages (%), ems (em), rems (rem), and viewport units (vw, vh).

/* Using different units */
.container {
  grid-gap: 2em 5%;
}

Responsive Design​

You can use media queries to adjust the grid gap based on screen size, making your layout more responsive.

@media (max-width: 600px) {
  .container {
    grid-gap: 10px;
  }
}

Best Practices​

  1. Consistency: Try to maintain consistent gap sizes across different sections for a harmonious layout.
  2. Readability: Use the shorthand grid-gap property for brevity and easier maintenance unless you need different row and column gaps.
  3. Responsiveness: Use relative units like em, rem, or percentages for a more flexible and responsive design.

Modern Syntax​

Note that in modern CSS specifications, grid-gap, grid-row-gap, and grid-column-gap have been generalized as gap, row-gap, and column-gap, respectively. These newer properties are not just for grid layouts but can also be used with flexbox starting from CSS Flexible Box Layout Module Level 2.

/* Modern syntax */
.container {
  gap: 20px 30px;
}

Grid Alignment​

  • justify-content: Aligns the grid along the row axis.
  • align-content: Aligns the grid along the column axis.
  • justify-items: Aligns grid items along the row axis.
  • align-items: Aligns grid items along the column axis.

Know more about grid alginment here

Shorthand​

  • grid: The shorthand property for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

    grid: 50px 1fr / 200px 1fr;

Best Practices​

  1. Semantic Integrity: Use the grid layout to enhance, not distort, the semantic structure of your HTML.
  2. Responsiveness: Employ media queries to adapt your grid layout to different screen sizes.
  3. Fallbacks: Provide alternative layouts for browsers that do not support CSS Grid.
  4. Code Comments: If your grid layout is complex, consider adding comments to make it easier to understand.

Advanced Scenarios​

  1. Nested Grids: You can nest one grid inside another by setting a grid item as a grid container.
  2. Aspect Ratios: You can maintain aspect ratios of grid items using techniques like padding hacks or by using the aspect-ratio property in modern browsers.