CSS Grid Cheatsheet — Complete Layout Guide

Container Properties

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;    /* 3 columns */
  grid-template-rows: auto 1fr auto;      /* 3 rows */
  gap: 16px;                              /* Row and column gap */
  row-gap: 16px;                          /* Row gap only */
  column-gap: 24px;                       /* Column gap only */
}

Sizing Functions

Item Placement

.item {
  grid-column: 1 / 3;      /* Span columns 1-2 */
  grid-row: 1 / 2;         /* Row 1 */
  grid-column: span 2;     /* Span 2 columns */
  grid-area: 1 / 1 / 3 / 3; /* row-start/col-start/row-end/col-end */
}

Named Grid Areas

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Responsive Grid (No Media Queries!)

.responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}