CSS Grid Layout

Introduction to CSS Grid

Benefits of CSS Grid:

Two-dimensional layout control (rows AND columns),
Precise placement of elements,
Easy creation of complex layouts,
Dynamic re-ordering of content based on media queries,
Built-in support for responsive design,
Reduced need for layout frameworks and extra markup.

Setting Up a Grid Container

To create a grid layout, you first need to define a container as a grid by applying the display: grid; or display: inline-grid; property to a parent element:

.container {
  display: grid;
}

css

Grid Gaps

Example: Adding Gaps

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;  /* Adds gap between both rows and columns */
}

css

To set different gaps for rows and columns:

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

css

Defining Grid Columns and Rows

Use the grid-template-columns and grid-template-rows properties to define the size and number of columns and rows.

Fixed-Size Tracks

You can define fixed-size grid tracks (rows and columns) using various units:

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 100px;
}

css

This creates a grid with:

Three columns of 100px, 200px, and 100px widths
Two rows of 50px and 100px heights

The fr Unit

The fr unit represents a fraction of the available space in the grid container:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
}

css

This creates a grid where:

The total width is divided into 4 equal parts (1+2+1)
The first column gets 1/4 of the space
The second column gets 2/4 (or 1/2) of the space
The third column gets 1/4 of the space

The repeat() Function

For large grids, you can use the repeat() function:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* Same as: 1fr 1fr 1fr */
  grid-template-rows: repeat(2, 100px);   /* Same as: 100px 100px */
}

css

The repeat() function takes two arguments:

The number of times to repeat
The pattern to repeat

minmax() Function

The minmax() function defines a size range:

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

css

This creates a middle column that:

Will never be smaller than 200px
Will never be larger than 500px
Will grow and shrink within those constraints

You can use the minmax() function to create flexible grid tracks that adapt to content.

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

css

This means the second column will have a minimum width of 200px but can expand to take up remaining space.

Auto-Fill and Auto-Fit

For responsive design, auto-fill and auto-fit are useful:

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

css

This creates as many 200px+ columns as can fit in the container.

Difference between auto-fill and auto-fit:

auto-fill: Creates as many tracks as possible, even if they’re empty
auto-fit: Collapses empty tracks and stretches existing tracks to fill the space

grid-auto-rows and grid-auto-columns

For implicitly created grid tracks:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;  /* Any new rows will be 100px tall */
}

css

Example: 3-Column Layout

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
}

css

1fr 2fr 1fr means the grid will have three columns. The first and third columns will take 1 fraction of available space each, while the second column will take 2 fractions.
auto means the row height will adjust automatically based on the content.

Placing Items on the Grid

Once your grid is defined, you can position grid items using various methods:

Placing Items by Grid Lines

Grid lines are automatically numbered starting from 1:

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

css

This places the item:

From column line 1 to column line 3 (spanning 2 columns)
From row line 2 to row line 4 (spanning 2 rows)

Using Shorthand Properties

.item {
  grid-column: 1 / 3;  /* Start at line 1, end at line 3 */
  grid-row: 2 / 4;     /* Start at line 2, end at line 4 */
}

css

Even shorter using the unified grid-area property:

.item {
  /* Format: row-start / column-start / row-end / column-end */
  grid-area: 2 / 1 / 4 / 3;
}

css

Using the span Keyword

.item {
  grid-column: 1 / span 2;  /* Start at line 1 and span 2 columns */
  grid-row: span 2 / 4;     /* End at line 4 and span 2 rows upward */
}

css

Negative Line Numbers

You can count grid lines from the end using negative numbers:

.item {
  grid-column: 1 / -1;  /* Spans from first line to last line */
}

css

Placing Items by Grid Areas

You can also assign a name to grid areas and place grid items in those areas:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  height: 100vh;
}

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

css

This creates a classic page layout with header, footer, main content and sidebars.

Empty Cells

You can leave cells empty using a period (.):

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

css

In this example, the top-right cell in the middle row is left empty.

Alignment in CSS Grid

CSS Grid has powerful alignment capabilities, divided into two categories:

Aligning Grid Items Within Their Cells

.container {
  /* Horizontal alignment */
  justify-items: start | end | center | stretch;

  /* Vertical alignment */
  align-items: start | end | center | stretch;

  /* Shorthand for both */
  place-items: <align-items> <justify-items>;
}

css

Self-Alignment (Individual Items)

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: <align-self> <justify-self>;
}

css

Aligning the Grid Tracks Within the Container

If the grid tracks don’t use all available space:

.container {
  /* Horizontal alignment of all tracks */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

  /* Vertical alignment of all tracks */
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;

  /* Shorthand for both */
  place-content: <align-content> <justify-content>;
}

css

Responsive Layouts with CSS Grid

Example: Responsive 2-Column to 1-Column Layout

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

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* Switches to 1 column layout */
  }
}

css

Auto-Responsive Grids

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

css

This creates a responsive grid where:

Each column is at least 250px wide
Columns expand to fill available space
The number of columns adjusts automatically as the viewport changes

Combining Grid with Media Queries

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

@media (min-width: 768px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: 200px 1fr 200px;
    grid-template-areas:
      "header header header"
      "sidebar content aside"
      "footer footer footer";
  }
}

css

Grid vs. Flexbox

Grid and Flexbox are complementary, not competing layout systems. Here’s when to use each:

Use CSS Grid When:

Creating two-dimensional layouts (rows AND columns)
Working with the overall page layout
Precise placement of elements is needed
Creating complex, asymmetrical layouts
Designing from the “outside in” (defining the container first)

Use Flexbox When:

Creating one-dimensional layouts (either rows OR columns)
Distributing space among elements of unknown size
Aligning items within a container
Working with content flow rather than explicit placement
Designing from the “inside out” (letting the content dictate the layout)