CSS Grid: vertical positioning of grid items

CSS Grid
Vertical Positioning of Elements with
align-items and align-content

The CSS property align-items is for vertical positioning of the items in a grid. Below are all the options, together with the code required for each.

The property align-items can have any of the following four values:
- start
- center
- end
- stretch (default)
The property align-content can have any of the following three values:
- space-evenly
- space-between
- space-around

The example grids on this page have a dashed border so the vertical positioning of its contents can be clearly seen.

Left cell

Middle cell

Right cell

HTML

CSS
align-items: start;

<div class="align-start-grid">
   <div class="my-cell">Left cell</div>
   <div class="my-cell">Middle cell</div>
   <div class="my-cell">Right cell</div>
</div>

.align-start-grid {
    display: grid;
    border: 2px dashed #aa3333;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px;
    align-items: start;
}
.my-cell {
    background-color: #ffcc00;
}

Left cell

Middle cell

Right cell

HTML

CSS
align-items: center;

<div class="align-center-grid">
   <div class="my-cell">Left cell</div>
   <div class="my-cell">Middle cell</div>
   <div class="my-cell">Right cell</div>
</div>

.align-center-grid {
    display: grid;
    border: 2px dashed #aa3333;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px;
    align-items: center;
}
.my-cell {
    background-color: #ffcc00;
}

Left cell

Middle cell

Right cell

HTML

CSS
align-items: end;

<div class="align-end-grid">
   <div class="my-cell">Left cell</div>
   <div class="my-cell">Middle cell</div>
   <div class="my-cell">Right cell</div>
</div>

.align-end-grid {
    display: grid;
    border: 2px dashed #aa3333;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px;
    align-items: end;
}
.my-cell {
    background-color: #ffcc00;
}

Left cell

Middle cell

Right cell

HTML

CSS
align-items: stretch;

Effect: items occupy 100% of the row height.

<div class="align-stretch-grid">
   <div class="my-cell">Left cell</div>
   <div class="my-cell">Middle cell</div>
   <div class="my-cell">Right cell</div>
</div>

.align-stretch-grid {
    display: grid;
    border: 2px dashed #aa3333;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px;
    align-items: stretch;
}
.my-cell {
    background-color: #ffcc00;
}

Vertically

centred

content

Make grid items occupy the full height available
and vertically center their contents.

HTML

Note: you must add nested divs within each cell

CSS
align-items: stretch;

Note: you must define classes for the nested divs. Vertically centered positioning is achieved using CSS Flexbox with the property align-items.

<div class="align-stretch-grid">
   <div class="my-cell">
      <div class="div-v-center">Vertically</div>
   </div>
    <div class="my-cell">
      <div class="div-v-center">centred</div>
    </div>
    <div class="my-cell">
      <div class="div-v-center">content</div>
    </div>
</div>

.align-stretch-grid {
    display: grid;
    border: 2px dashed #aa3333;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px;
    align-items: stretch;
}
.my-cell {
    background-color: #ffcc00;
}
.div-v-center {
    display: flex;
    height: 100%;
    align-items: center;
}

Vertically

+horizontally

centred content

Make grid items occupy the full height and width available
and vertically and horizontally center their contents.

HTML

Note: you must add nested divs within each cell

CSS
align-items: stretch;

Note: you must define classes for the nested divs. This centered positioning is achieved using CSS Flexbox with the properties:

horizontal positioning:
justify-content: center;
vertical positioning:
align-items: center;

<div class="align-stretch-grid">
   <div class="my-cell">
      <div class="div-vh-center">Vertically</div>
   </div>
    <div class="my-cell">
      <div class="div-vh-center">centred</div>
    </div>
    <div class="my-cell">
      <div class="div-vh-center">content</div>
    </div>
</div>

.align-stretch-grid {
    display: grid;
    border: 2px dashed #aa3333;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px;
    align-items: stretch;
}
.my-cell {
    background-color: #ffcc00;
}
.div-vh-center {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

Top cell

Middle cell

Bottom cell

HTML

CSS
align-content: space-evenly;

Note: this property is used to define the vertical space between items; grid-gap is not used as align-content automatically creates a gap of the appropriate size.

Effect: Equal space between elements plus at the top and bottom of the column.

<div class="align-space-evenly-grid">
   <div class="my-cell">Left cell</div>
   <div class="my-cell">Middle cell</div>
   <div class="my-cell">Right cell</div>
</div>

.align-space-evenly-grid {
    width: 100%;
    height: 200px;
    display: grid;
    border: 2px dashed #aa3333;
    grid-template-rows: repeat(3, 50px);
    align-content: space-evenly;
}
.my-cell {
    background-color: #ffcc00;
}

Top cell

Middle cell

Bottom cell

HTML

CSS
align-content: space-between;

Notes: this property is used to define the vertical space between items; grid-gap is not used as align-content automatically creates a gap of the appropriate size.

Effect: Equal space between elements with no space at either the top or bottom of the column.

<div class="align-space-between-grid">
   <div class="my-cell">Top cell</div>
   <div class="my-cell">Middle cell</div>
   <div class="my-cell">Bottom cell</div>
</div>

.align-space-between-grid {
    width: 100%;
    height: 200px;
    display: grid;
    border: 2px dashed #aa3333;
    grid-template-rows: repeat(3, 50px);
    align-items: space-between;
}
.my-cell {
  background-color: #ffcc00;
}

Left cell

Middle cell

Right cell

HTML

Key CSS:
align-content: space-around;

<div class="justify-space-around-grid">
   <div class="my-cell">Left cell</div>
   <div class="my-cell">Middle cell</div>
   <div class="my-cell">Right cell</div>
</div>

.align-space-around-grid {
    width: 100%;
    height: 200px;
    display: grid;
    border: 2px dashed #aa3333;
    grid-template-rows: repeat(3, 50px);
    align-content: space-around;
}
.my-cell {
    background-color: #ffcc00;
}

Learn Pinegrow, Bootstrap, CSS

CSS GridVertical Positioning of Elements withalign-items and align-content

HTML

CSSalign-items: start;

HTML

CSSalign-items: center;

HTML

CSSalign-items: end;

HTML

CSSalign-items: stretch;

Make grid items occupy the full height availableand vertically center their contents.

HTML

CSSalign-items: stretch;

Make grid items occupy the full height and width availableand vertically and horizontally center their contents.

HTML

CSSalign-items: stretch;

HTML

CSSalign-content: space-evenly;

HTML

CSSalign-content: space-between;

HTML

Key CSS:align-content: space-around;

CSS Grid
Vertical Positioning of Elements with
align-items and align-content

CSS
align-items: start;

CSS
align-items: center;

CSS
align-items: end;

CSS
align-items: stretch;

Make grid items occupy the full height available
and vertically center their contents.

CSS
align-items: stretch;

Make grid items occupy the full height and width available
and vertically and horizontally center their contents.

CSS
align-items: stretch;

CSS
align-content: space-evenly;

CSS
align-content: space-between;

Key CSS:
align-content: space-around;