Skip to main content

CSS Grid Containers

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system — handling both rows and columns simultaneously — unlike Flexbox which is primarily 1-dimensional.

1. Enabling Grid​

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

2. Defining Columns and Rows​

grid-template-columns​

/* Fixed widths */
.container { grid-template-columns: 200px 400px 200px; }

/* Fractional units (fr) — share free space */
.container { grid-template-columns: 1fr 2fr 1fr; } /* 25% / 50% / 25% */

/* Equal columns */
.container { grid-template-columns: repeat(3, 1fr); }

/* Mixed units */
.container { grid-template-columns: 200px 1fr 1fr; } /* Sidebar + 2 flexible cols */

/* Named columns */
.container {
  grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
}

grid-template-rows​

/* Define row heights */
.container { grid-template-rows: 80px 1fr 60px; } /* Header / Content / Footer */

/* Auto: row height matches content */
.container { grid-template-rows: auto 1fr auto; }

/* Named rows */
.container {
  grid-template-rows: [header-start] 80px [header-end body-start] 1fr [body-end footer-start] 60px [footer-end];
}

3. The fr Unit​

fr stands for "fraction of free space." It's unique to CSS Grid and distributes remaining space proportionally.

/* The remaining space after fixed widths is distributed via fr */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  /* Sidebar=250px | Main=all remaining space | Right panel=300px */
}

/* All equal: fr units are the same as: */
.equal-cols { grid-template-columns: 1fr 1fr 1fr; }
/* Same as */ grid-template-columns: repeat(3, 1fr); }

4. repeat() Function​

/* Repeat a fixed number of times */
grid-template-columns: repeat(4, 1fr);           /* 4 equal columns */
grid-template-columns: repeat(3, 200px 1fr);     /* Alternating: 3× 200px+1fr */

/* Auto-fill: create as many columns as fit at minimum size */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

/* Auto-fit: same as auto-fill but empty tracks collapse */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

auto-fill vs auto-fit​

auto-fill: | 250px | 250px | 250px | [empty 250px] |   ← keeps ghost tracks
auto-fit:  | 250px |  250px  |     1fr expanding    |   ← last items expand

5. gap: Grid Gutters​

.container {
  gap: 1.5rem;              /* All sides */
  row-gap: 2rem;            /* Between rows only */
  column-gap: 1rem;         /* Between columns only */
  gap: 2rem 1rem;           /* row-gap / column-gap */
}

6. grid-auto-rows and grid-auto-columns​

Sets the size of implicitly created rows/columns (when items overflow the explicit grid):

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;   /* All auto-created rows are 200px tall */
}

7. justify-items and align-items in Grid​

/* Horizontal alignment of items inside their cells */
.container { justify-items: start | end | center | stretch; }

/* Vertical alignment of items inside their cells */
.container { align-items:   start | end | center | stretch; }

/* Shorthand: place-items: align justify */
.container { place-items: center; }      /* Both centered */
.container { place-items: start end; }  /* Top center of each cell */

8. Distributing the Grid Itself​

When the grid is smaller than its container:

.container {
  justify-content: start | end | center | space-between | space-around | space-evenly;
  align-content:   start | end | center | space-between | space-around | space-evenly;
  place-content: center; /* Centers grid inside container both ways */
}

9. Visualizing the Grid​

grid-template-columns: 1fr 2fr 1fr
grid-template-rows:    80px 1fr 60px

Line numbers:
  1   2     3     4
  ↓   ↓     ↓     ↓
  ┌───┬─────┬───┐  ← Row line 1
  │   │     │   │  h=80px
  ├───┼─────┼───┤  ← Row line 2
  │   │     │   │  h=1fr (grows)
  ├───┼─────┼───┤  ← Row line 3
  │   │     │   │  h=60px
  └───┴─────┴───┘  ← Row line 4