CSS Grid: CSS property justify-items for horizontal alignment

CSS Grid
Horizontal Positioning of Elements with
justify-items and justify-content

Horizontal alignment of items within a CSS Grid is controlled with the CSS properties justify-items and justify-content.

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

Below is an example for each, together with the HTML and CSS code required.

Left cell

Middle cell

Right cell

HTML

CSS
justify-items: start;

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

.justify-start-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: start;
}
.my-cell {
    background-color: #ffcc00;
}

Left cell

Middle cell

Right cell

HTML

CSS
justify-items: center;

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

.justify-center-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}
.my-cell {
    background-color: #ffcc00;
}

Left cell

Middle cell

Right cell

HTML

CSS
justify-items: end;

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

.justify-end-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: end;
}
.my-cell {
    background-color: #ffcc00;
}

Left cell

Middle cell

Right cell

HTML

CSS
justify-items: stretch;

Note: grid-gap property defines the space between cells.
Effect: Each item in the grid occupies the full width available, with the contents left-aligned.

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

.justify-stretch-grid {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
}
.my-cell {
    background-color: #ffcc00;
}

Left cell

Middle cell, centre-justified

Right cell, right-justified

Make grid items occupy the full available width
and center or right-justify their contents

HTML

CSS
justify-items: stretch;

Notes: you must define classes for the nested divs.

Notes: you must add nested divs within the middle and right cells

<div class="justify-stretch-grid">
  <div class="my-cell">Left cell</div>
  <div class="my-cell">
    <div class="div-center">
       Middle cell, centre-justified
    </div>
  </div>
  <div class="my-cell">
    <div class="div-right">
       Right cell, right-justified
    </div>
  </div>
</div>

.justify-stretch-grid {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-around;
}
.my-cell {
    background-color: #ffcc00;
}
.div-center {
    width: 100%;
    text-align:center;
}
.div-right {
    width: 100%;
    text-align:right;
}

Left cell

Middle cell

Right cell

HTML

CSS
justify-content: space-evenly;

Notes: grid-gap is not used and column-widths are defined such that the total width of all the columns is less than the width of the grid itself.

Effect: Equal space between elements and at each end of the row.

<div class="justify-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>

.justify-space-evenly-grid {
    display: grid;
    grid-template-columns: repeat(3, 30%);
    justify-content: space-evenly;
}
.my-cell {
    background-color: #ffcc00;
}

Left cell

Middle cell

Right cell

HTML

CSS
justify-content: space-between;

Note: grid-gap is not used and column-widths are defined such that the total width of all the columns is less than the width of the grid itself.

Effect: Equal space between elements with no space at either end of the row.

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

.justify-space-between-grid {
    display: grid;
    grid-template-columns: repeat(3, 30%);
    justify-content: space-between;
}
.my-cell {
    background-color: #ffcc00;
}

Left cell

Middle cell

Right cell

HTML

CSS
justify-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>

.justify-space-around-grid {
    display: grid;
    grid-template-columns: repeat(3, 30%);
    justify-content: space-around;
}
.my-cell {
    background-color: #ffcc00;
}

Learn Pinegrow, Bootstrap, CSS

CSS GridHorizontal Positioning of Elements withjustify-items and justify-content

HTML

CSSjustify-items: start;

HTML

CSSjustify-items: center;

HTML

CSSjustify-items: end;

HTML

CSSjustify-items: stretch;

Make grid items occupy the full available width and center or right-justify their contents

HTML

CSSjustify-items: stretch;

HTML

CSSjustify-content: space-evenly;

HTML

CSSjustify-content: space-between;

HTML

CSSjustify-content: space-around;

CSS Grid
Horizontal Positioning of Elements with
justify-items and justify-content

CSS
justify-items: start;

CSS
justify-items: center;

CSS
justify-items: end;

CSS
justify-items: stretch;

Make grid items occupy the full available width
and center or right-justify their contents

CSS
justify-items: stretch;

CSS
justify-content: space-evenly;

CSS
justify-content: space-between;

CSS
justify-content: space-around;