Little Known
CSS Basics Grid

Grid Container Properties

display: grid

This element will use the grid layout method to position all its children.

display: inline-grid

block : inline-block :: grid : inline-grid

• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-auto-columns
• grid-auto-rows
• grid
• gap
• justify-content
• justify-items
• align-content
• align-items

grid-template-columns

Set the proportions for tracks along the inline axis of the grid container

Value: a series of valid length values

• 1fr 50em 35em 1fr
• 30% 150px 30%

grid-template-rows

Set the proportions for tracks along the block axis of the grid container

Value: a series of valid length values

• 300px 200px auto
• 30% 150px 30%

grid-template-areas

Assign names to grid areas

.grid {
  grid-template-columns: 40em 20em;
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "header header"
    "body sidebar"
    "footer footer";
}

grid-template

Assign rows, columns, and areas

.grid {
  grid-template:
    "header header"  auto
    "body   sidebar" auto
    "footer footer"  auto /
     40em   20em;
}

grid-template

.grid {
  grid-template:
    "👱‍♀️   👱‍♀️" auto
    "📄   📶" auto
    "🦶   🦶" auto /
     40em 20em;
}

grid-auto-columns

Set size to be repeated for all tracks along the inline axis of the grid container

Value: a valid length value

• 200px
• 1fr
• 20%
• auto

grid-auto-rows

Set size to be repeated for all tracks along the block axis of the grid container

Value: a valid length value

• 200px
• 10rem
• auto

grid

Shorthand for any pair of
rows / columns values
(-template- or -auto-)

Syntax: rows / columns

gap

Creates gaps between columns and rows

Formerly called grid-gap

Shorthand for
row-gap column-gap

justify-content

Distributes tracks (columns) along the inline axis of the grid container

• stretch
• start
• end
• center
• space-between
• space-around
• space-evenly

justify-items

Distributes children along the inline axis within their track (column)

• stretch
• start
• end
• center

align-content

Distributes tracks (rows) along the block axis of the grid container

• stretch
• start
• end
• center
• space-between
• space-around
• space-evenly

align-items

Aligns children on the block axis within their track (row)

• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

Grid Container Values

CSS Lengths

Any normal CSS length is a valid grid track value.

• px
• %
• pt
• pc
• in
• cm
• mm
• em
• rem
• ch
• vw
• vh
• vmin
• vmax

fr

One “fraction” of the grid’s free space

Based on total number of fr in the row or column

Calculated after non-fr space is used

fr

300px 1fr

1fr 50em 25em 1fr

.6fr 1.6fr 1fr

min-content
max-content

The smallest and largest space that the elements in that track can take up

minmax()

Finds a value between two lengths

minmax(<min>, <max>)

minmax(10px, 1fr)

fit-content()

Equivalent to
minmax(auto, max-content)

Clamp argument overrides
max-content

fit-content(<clamp>)

repeat()

Repeats a certain value a specified number of times

repeat(<count>, <length>)

repeat(12, 1fr)

auto-fill

A <count> value for repeat()

Repeats a certain value until the current track is filled

repeat(
  auto-fill,
  minmax(200px, 1fr)
)

auto-fit

A <count> value for repeat()

Repeats a certain value until the children are accounted for

repeat(
  auto-fit,
  minmax(200px, 1fr)
)

Grid Child Properties

• grid-column
• grid-row
• grid-area
• order
• align-self
• justify-self

grid-column

Which column grid-line(s) this element should start (& stop) at

Numbers correspond to edges, not columns

Values: integer [/ integer]

grid-row

Which row grid-line(s) this element should start (& stop) at

Numbers correspond to edges, not rows

Values: integer [/ integer]

grid-area

A named grid-template-areas location

Shorthand for
row-start / column-start / row-end / column-end

order

Change the element’s location along the main axis

Relative to order of all siblings

Value: integer

align-self

Allows the element to override its parent’s align-items value

Value: any align-items value

justify-self

Allows the element to override its parent’s justify-items value

Value: any justify-items value

Use Cases

Perfect Centering

.grid {
  display: grid;
  justify-items: center;
  align-items: center;
}

Perfect Centering

Global Grid Layout

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

Global Grid Layout

Equal-Height Grids

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
}

Equal-Height Grids

Other Grid Use Cases

Flexbox vs. Grid

Flexbox is 1-dimensional: it sets a main axis and provides controls for positioning elements along that axis.

Grid is 2-dimensional: it sets both block and inline axes and provides controls for positioning elements along either/both axes.