ā¤ Like
šŸ”– Save
šŸ”— Share
@thedevspaceio
@thedevspaceio

CSS Grid Cheatsheet

@thedevspaceio

šŸ§© CSS Grid Cheatsheet

CSS Grid is a two-dimensional layout system for building complex, responsive interfaces with rows and columns. It gives precise control over track sizing, item placement, and named areas.

āœ… Basic grid properties āœ… display āœ… grid-template-columns / rows āœ… grid-template-areas āœ… grid-template āœ… gap / row-gap / column-gap āœ… grid-auto-flow āœ… grid-auto-columns / grid-auto-rows āœ… grid-column / grid-row āœ… grid-column-start / grid-column-end / grid-row-start / grid-row-end āœ… grid-area āœ… repeat()

#css #grid #layout #frontend #webdev #responsive #csslayout #gridtemplate #placement #uidesign

Basic grid properties

CSS Grid is a two-dimensional layout system for creating complex responsive layouts with rows and columns.

PropertyNotes
displaygrid or inline-grid establishes a grid formatting context on the element.
grid-template-columnsDefines explicit column tracks (sizes, repeat, minmax, fr).
grid-template-rowsDefines explicit row tracks.
grid-template-areasNamed grid areas for readable layout placement.
grid-templateShorthand for grid-template-rows, grid-template-columns, and grid-template-areas.
gapShorthand for row-gap and column-gap; spacing between tracks.
row-gapControls spacing between rows.
column-gapControls spacing between columns.
grid-auto-flowControls auto-placement direction: row, column, and dense options.
grid-auto-columnsSize for implicitly created columns.
grid-auto-rowsSize for implicitly created rows.
grid-columnShorthand for grid-column-start / grid-column-end (e.g., 1 / -1 to span).
grid-rowShorthand for grid-row-start / grid-row-end.
grid-column-startExplicit start line for columns.
grid-column-endExplicit end line for columns.
grid-row-startExplicit start line for rows.
grid-row-endExplicit end line for rows.
grid-areaAssigns an item to a named grid area or sets start/end lines.

display

Turns an element into a grid container.

css
.container {
  display: grid; /* or inline-grid */
}

Grid container

grid-template-columns / rows

Define explicit columns and rows.

css
.container {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  grid-template-rows: auto 50px auto;
  gap: 16px;
}

1

2

3

4

5

6

7

8

9

grid-template-areas

Named areas make layouts readable.

css
.container {
  display: grid;
  grid-template-columns: 220px 1fr; /* 2 columns */
  grid-template-rows: auto 1fr auto; /* 3 rows */
  grid-template-areas:
    "header header" /* 1st row */
    "sidebar main" /* 2nd row, sidebar left, main right */
    "footer footer"; /* 3rd row */
  gap: 16px;
  min-height: 300px;
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

Header

Sidebar

Main

Footer

grid-template

Shorthand combining grid-template-rows, grid-template-columns, and grid-template-areas.

css
.container {
  grid-template:
    "header header" auto /* 1st row, auto height */
    "sidebar main" 1fr /* 2nd row, 1fr height */
    "footer footer" auto / 220px 1fr; /* 3rd row: auto height, 2 columns: 220px and 1fr */
}

gap

gap sets spacing between rows and columns. Shorthand for row-gap and column-gap.

css
.container {
  display: grid;
  gap: 16px; /* sets both row-gap and column-gap */
  /* gap: <row> <column>; */
  /* gap: <top> <right> <bottom> <left>; */
}

1

2

3

1

2

3

1

2

3

row-gap / column-gap

Control spacing in one axis.

css
.container {
  row-gap: 12px;
  column-gap: 24px;
}

1

2

3

4

5

6

grid-auto-flow

Controls how auto-placed items flow: row (default), column, and dense for filling gaps.

css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column; /* fills columns first */
}

1

2

3

4

css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* fills rows first */
}

1

2

3

4

grid-auto-columns / grid-auto-rows

Define size for implicitly created tracks when items are placed outside the explicit grid.

css
.container {
  display: grid;
 
  /* Explicit grid */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 80px);
 
  /* Implicit tracks */
  grid-auto-rows: 100px;
  grid-auto-columns: 120px;
 
  gap: 16px;
}
 
.item-extra {
  grid-column: 3; /* creates an implicit column */
  grid-row: 3; /* creates an implicit row */
}

1

2

3

4

5

grid-column / grid-row

Shorthand to set start / end lines for an item.

css
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
}
.item-full {
  grid-column: 1 / -1; /* span full width */
}
.item-tall {
  grid-row: 1 / 3; /* span two rows */
}

Full width

1 column

1 column, 2 rows

2 columns

1 column

1 column

1 column

grid-column-start / grid-column-end / grid-row-start / grid-row-end

Use when you need explicit control of start and end lines.

css
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
}
.card {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

grid-area

Assign an item to a named grid area or define start/end lines with shorthand.

css
.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
 
/* or as shorthand */
.box {
  grid-area: 1 / 2 / 2 / 4; /* row-start / col-start / row-end / col-end */
}

repeat()

Use minmax and auto-fit / auto-fill with repeat() for responsive grids.

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

Card 1

Card 2

Card 3

Full-Stack AI Developer Roadmap

From HTML & CSS to working with AI models, all in one structured roadmap.

@thedevspaceio
www.thedevspace.io