Skip to main content

​
What is CSS Grid?

CSS Grid is a two-dimensional layout system - it handles both rows and columns simultaneously. Ideal for:
  • Page layouts
  • Image galleries
  • Card grids
  • Dashboard layouts
  • Any design with rows and columns

​
Grid vs Flexbox

/* Good for: Navigation, centering, simple rows/columns */
.container {
  display: flex;
  /* Controls either row OR column */
}

​
Creating a Grid Container

.container {
  display: grid;
}

​
Grid Properties

​
grid-template-columns

Defines column sizes. 
.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  /* 3 columns, each 200px */
}

​
grid-template-rows

Defines row sizes (same syntax as columns). 
.grid {
  display: grid;
  grid-template-rows: 100px auto 100px;
  /* Header 100px, content auto, footer 100px */
}

​
gap

Space between grid cells. 
.grid {
  display: grid;
  gap: 20px;              /* Equal gap all around */
  gap: 20px 40px;         /* row-gap column-gap */
  row-gap: 20px;
  column-gap: 40px;
}

​
Special Grid Units

​
fr (Fraction)

Shares available space. 
.grid {
  grid-template-columns: 1fr 2fr 1fr;
  /* Divides space into 4 parts: 1 + 2 + 1 */
  /* Columns get: 25%, 50%, 25% */
}

​
auto

Fits content size. 
.grid {
  grid-template-columns: auto 1fr auto;
  /* Sides fit content, middle takes remaining space */
}

​
min-content / max-content

.grid {
  grid-template-columns: min-content 1fr max-content;
  /* min-content: Smallest size without overflow */
  /* max-content: Largest size without wrapping */
}

​
minmax()

Sets min and max size. 
.grid {
  grid-template-columns: minmax(200px, 1fr);
  /* At least 200px, but can grow to fill space */
}

​
Responsive Grid Functions

​
auto-fit

Fits as many columns as possible, collapses empty tracks. 
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* Creates as many 250px+ columns as fit */
  /* Responsive without media queries! */
}

​
auto-fill

Fills row with columns, keeps empty tracks. 
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* Similar to auto-fit but maintains empty columns */
}
auto-fit vs auto-fill: Use auto-fit for most cases - it makes columns expand to fill space when there are fewer items.

​
Real Examples from the Project

​
Benefits Grid (Responsive)

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);  /* 24px */
}

/* Result:
 * Large screens: 4 columns
 * Medium screens: 2-3 columns  
 * Small screens: 1 column
 * No media queries needed!
 */

​
Products Grid

.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

​
Empty State (Full Width)

.products__empty-state {
  grid-column: 1 / -1;  /* Span all columns */
  text-align: center;
  padding: var(--spacing-2xl);
}

/* 1 = start at first line */
/* -1 = end at last line */

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* Footer columns adjust automatically */

​
Grid Item Positioning

​
grid-column

Controls horizontal position and span. 
.item {
  grid-column: span 2;  /* Takes 2 columns */
}

​
grid-row

Controls vertical position and span (same syntax). 
.item {
  grid-row: span 2;    /* Takes 2 rows */
  grid-row: 1 / 3;     /* Row 1 to 3 */
}

​
Alignment

​
justify-items

Align items horizontally within their cells. 
.grid {
  justify-items: start;    /* Left align */
  justify-items: end;      /* Right align */
  justify-items: center;   /* Center */
  justify-items: stretch;  /* Fill width (default) */
}

​
align-items

Align items vertically within their cells. 
.grid {
  align-items: start;    /* Top align */
  align-items: end;      /* Bottom align */
  align-items: center;   /* Center */
  align-items: stretch;  /* Fill height (default) */
}

​
place-items

Shorthand for align-items and justify-items. 
.grid {
  place-items: center;        /* Center both axes */
  place-items: start end;     /* align-items justify-items */
}

​
justify-content

Align entire grid horizontally if it’s smaller than container. 
.grid {
  justify-content: start;
  justify-content: end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

​
Common Grid Patterns

​
Equal Columns

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

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

/* Fixed sidebar, flexible content */

​
Holy Grail Layout

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Header (auto), Content (flexible), Footer (auto) */

​
12-Column Grid (Bootstrap-style)

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

.col-6 { grid-column: span 6; }   /* Half width */
.col-4 { grid-column: span 4; }   /* Third width */
.col-3 { grid-column: span 3; }   /* Quarter width */

​
Masonry-like Layout

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

.item-tall {
  grid-row: span 2;  /* Some items taller */
}

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

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;  /* Square images */
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.featured {
  grid-column: span 2;  /* Featured card takes 2 columns */
  grid-row: span 2;     /* And 2 rows */
}

​
Responsive Grid

​
Auto-Responsive (No Media Queries!)

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

/* Automatically adjusts columns based on available space */

​
With Media Queries

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 992px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

​
Mobile Override

@media (max-width: 480px) {
  .products__grid {
    grid-template-columns: 1fr;  /* Single column on mobile */
  }
  
  .benefits__grid {
    grid-template-columns: 1fr;
  }
}

​
Grid Template Areas

Named grid areas for complex layouts. 
.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
Responsive template areas: 
@media (max-width: 768px) {
  .page {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

​
Auto Rows/Columns

​
auto-rows

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

​
auto-rows with minmax

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
  /* At least 150px, grow with content */
}

​
Dense Packing

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-flow: dense;  /* Fill gaps with smaller items */
}

​
Nested Grids

.outer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.inner-grid {
  display: grid;  /* Grid item can also be a grid! */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

​
Grid vs Flexbox Decision Tree

1

One Dimension?

If you only need to control rows or columns → use Flexbox
2

Two Dimensions?

If you need to control rows and columns → use Grid
3

Content-Out?

If layout is based on content size → use Flexbox
4

Layout-In?

If you define the layout first → use Grid

​
Visual Grid Examples

​
4-Column Grid

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Result:
 * [───] [───] [───] [───]
 * [───] [───] [───] [───]
 */

​
Auto-Fit Responsive

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

/* Large screen (1200px):
 * [───] [───] [───] [───]
 *
 * Medium screen (800px):
 * [─────] [─────]
 *
 * Mobile (400px):
 * [─────────]
 */

​
Quick Reference

​
Container Properties

  • display: grid - Create grid
  • grid-template-columns - Column sizes
  • grid-template-rows - Row sizes
  • gap - Space between cells
  • grid-template-areas - Named areas

​
Item Properties

  • grid-column - Horizontal position
  • grid-row - Vertical position
  • grid-area - Named area placement

​
Special Functions

  • repeat(n, size) - Repeat pattern
  • minmax(min, max) - Min/max size
  • auto-fit - Fit columns
  • auto-fill - Fill with columns
  • fr - Fraction of space

​
Next Steps

Responsive Design

Make grids responsive

Animations

Animate grid items

Build docs developers (and LLMs) love

Get started for freeTalk to us