CSS Grid - The Ultimate Guide

CSS Grid is a powerful layout system designed to create complex web layouts with ease. Unlike Flexbox, which works in one dimension (either row or column), Grid operates in two dimensions, allowing for precise placement of elements across both rows and columns. This blog post will take you through an in-depth look at CSS Grid, explaining every property in detail to ensure you master this layout system.

1. Grid Container Properties

Defining a Grid Container

To enable grid functionality, set the display property to grid or inline-grid. The difference is that grid makes the container a block-level element, while inline-grid makes it inline.

.container {
    display: grid;
}

When a container is set to grid, all its direct children automatically become grid items. inline-grid behaves the same way but does not take up the full width of the parent container.

2. Defining Columns and Rows

Explicit Column Definitions

You can explicitly define columns using grid-template-columns. Fixed values (e.g., 100px) ensure a column remains a fixed width, while flexible fractions (fr) distribute space dynamically.

.container {
    grid-template-columns: 100px 200px 150px; /* Fixed widths */
    grid-template-columns: 1fr 2fr 1fr; /* Flexible widths */
    grid-template-columns: repeat(3, 1fr); /* Creates three equal columns */
    grid-template-columns: minmax(100px, 1fr) auto; /* Columns with min & max limits */
}

repeat(n, value): Repeats a specified column pattern.
minmax(min, max): Ensures a column stays within the defined range.
auto: Lets the browser determine column size.

Explicit Row Definitions

Just like columns, we can define rows using grid-template-rows.

.container {
    grid-template-rows: 100px auto 200px;
    grid-template-rows: repeat(2, minmax(50px, auto));
}

Grid Template (Shorthand)

You can define both rows and columns in one line using grid-template.

.container {
    grid-template: 100px auto / 1fr 2fr;
}

3. Auto-Generated Column and Row Sizes

Sometimes, you may not define all columns and rows explicitly. In such cases, grid-auto-columns and grid-auto-rows determine the size of any additional grid tracks.

.container {
    grid-auto-columns: minmax(100px, auto);
    grid-auto-rows: minmax(50px, auto);
}

Auto Placement Behavior

grid-auto-flow determines how grid items are placed when no explicit placement is set.

.container {
    grid-auto-flow: row; /* Default: fills rows first */
    grid-auto-flow: column; /* Fills columns first */
    grid-auto-flow: row dense; /* Fills gaps more efficiently */
}

4. Responsive Grid with auto-fill & auto-fit

These allow flexible layouts that automatically adjust based on available space.

.container {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Creates as many columns as possible */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Shrinks columns to fit */
}

5. Spacing Between Grid Items

Use gap, row-gap, and column-gap to control spacing between grid items.

.container {
    gap: 20px; /* Sets both row & column gap */
    row-gap: 10px; /* Only row spacing */
    column-gap: 15px; /* Only column spacing */
}

6. Aligning Grid Items

Aligning Items Inside the Grid Cells

.container {
    justify-items: center; /* Aligns items horizontally */
    align-items: start; /* Aligns items vertically */
}

Aligning the Entire Grid Inside Its Container

.container {
    justify-content: space-between;
    align-content: center;
}

Shortcuts for Alignment

.container {
    place-items: center start; /* align-items + justify-items */
    place-content: center space-evenly; /* align-content + justify-content */
}

7. Grid Item Properties

Controlling Item Placement

Use grid-column and grid-row to position items within the grid.

.item {
    grid-column: 1 / 3; /* Spans columns 1 to 3 */
    grid-row: 2 / 4; /* Spans rows 2 to 4 */
}

Spanning Across Multiple Columns or Rows

.item {
    grid-column: span 2; /* Spans 2 columns */
    grid-row: span 3; /* Spans 3 rows */
}

Using Named Grid Areas

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

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

8. Aligning Items Inside Their Grid Cells

.item {
    justify-self: center; /* Aligns item horizontally */
    align-self: start; /* Aligns item vertically */
}

Shortcut for both:

.item {
    place-self: center start; /* align-self + justify-self */
}

9. Subgrid – Inheriting Layout from Parent Grid

Subgrid allows child elements to inherit row and column structure from their parent grid.

.parent {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.child {
    display: grid;
    grid-template-columns: subgrid; /* Uses parent’s columns */
}

Conclusion

CSS Grid is a revolutionary layout system that simplifies web design by allowing precise control over both rows and columns. If you’re designing complex web pages or simple layouts, understanding these properties will help you create responsive, flexible, and visually appealing designs with minimal effort.