Align & Justify
Apply align & justify properties for grid and flexbox layouts.
Classes
| Class | Properties |
|---|---|
| .align-stretch,stretch,start,flex-start,end,flex-end,center,center,baseline,baseline | align-items: undefined; |
| .align-items-stretch,stretch,start,flex-start,end,flex-end,center,center,baseline,baseline | align-items: undefined; |
| .align-self-stretch,stretch,start,flex-start,end,flex-end,center,center,baseline,baseline | align-self: undefined; |
| .justify-items-stretch,stretch,start,flex-start,end,flex-end,center,center,baseline,baseline | justify-items: undefined; |
| .justify-self-stretch,stretch,start,flex-start,end,flex-end,center,center,baseline,baseline | justify-self: undefined; |
| .justify-start,flex-start,end,flex-end,center,center,between,space-between,around,space-around,evenly,space-evenly,stretch,stretch | justify-content: undefined; |
| .justify-content-start,flex-start,end,flex-end,center,center,between,space-between,around,space-around,evenly,space-evenly,stretch,stretch | justify-content: undefined; |
| .justify-items-start,flex-start,end,flex-end,center,center,between,space-between,around,space-around,evenly,space-evenly,stretch,stretch | justify-items: undefined; |
| .justify-self-start,flex-start,end,flex-end,center,center,between,space-between,around,space-around,evenly,space-evenly,stretch,stretch | justify-self: undefined; |
.align-{position}
Aligns grid items along block axis or flex items along cross axis.
.align-start
xxxxxxxxxx1
<small>.grid.align-start</small>2
<div class="grid columns-auto align-start">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-start</small>9
<div class="flex align-start">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-start
.flex.align-start
.align-center
xxxxxxxxxx1
<small>.grid.align-center</small>2
<div class="grid columns-auto align-center">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-center</small>9
<div class="flex align-center">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-center
.flex.align-center
.align-end
xxxxxxxxxx1
<small>.grid.align-end</small>2
<div class="grid columns-auto align-end">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-end</small>9
<div class="flex align-end">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-end
.flex.align-end
.align-baseline
xxxxxxxxxx1
<small>.grid.align-baseline</small>2
<div class="grid columns-auto align-baseline">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-baseline</small>9
<div class="flex align-baseline">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-baseline
.flex.align-baseline
.align-stretch
xxxxxxxxxx1
<small>.grid.align-stretch</small>2
<div class="grid columns-auto align-stretch">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-stretch</small>9
<div class="flex align-stretch">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-stretch
.flex.align-stretch
.align-content-{position}
Sets the align-content property of a grid or flexbox container. It's a less common property becuase it requires that the container is explicityly larger than it's contents. Works similar to the justify-content property.
.align-content-start
xxxxxxxxxx1
<small>.grid.align-content-start</small>2
<div class="grid columns-auto align-content-start h-8 border-1">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-content-start</small>9
<div class="flex align-content-start h-8 border-1">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-content-start
.flex.align-content-start
.align-content-center
xxxxxxxxxx1
<small>.grid.align-content-center</small>2
<div class="grid columns-auto align-content-center h-8 border-1">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-content-center</small>9
<div class="flex align-content-center h-8 border-1">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-content-center
.flex.align-content-center
.align-content-end
xxxxxxxxxx1
<small>.grid.align-content-end</small>2
<div class="grid columns-auto align-content-end h-8 border-1">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-content-end</small>9
<div class="flex align-content-end h-8 border-1">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-content-end
.flex.align-content-end
.align-content-around
xxxxxxxxxx1
<small>.grid.align-content-around</small>2
<div class="grid columns-auto align-content-around h-8 border-1">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-content-around</small>9
<div class="flex align-content-around h-8 border-1">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-content-around
.flex.align-content-around
.align-content-between
xxxxxxxxxx1
<small>.grid.align-content-between</small>2
<div class="grid columns-auto align-content-between h-8 border-1">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-content-between</small>9
<div class="flex align-content-between h-8 border-1">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-content-between
.flex.align-content-between
.align-content-evenly
xxxxxxxxxx1
<small>.grid.align-content-evenly</small>2
<div class="grid columns-auto align-content-evenly h-8 border-1">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-content-evenly</small>9
<div class="flex align-content-evenly h-8 border-1">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-content-evenly
.flex.align-content-evenly
.align-content-stretch
xxxxxxxxxx1
<small>.grid.align-content-stretch</small>2
<div class="grid columns-auto align-content-stretch h-8 border-1">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.align-content-stretch</small>9
<div class="flex align-content-stretch h-8 border-1">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.align-content-stretch
.flex.align-content-stretch
.align-self-{position}
Aligns grid or flex item, regardless what the container align setting is.
.align-self-auto
xxxxxxxxxx1
<div class="grid columns-auto h-8 border-1">2
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>3
<div class="align-self-auto border-1 border-gray-3 p-4 bg-purple-1"></div>4
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>6
</div>7
<div class="flex h-8 border-1">8
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>9
<div class="align-self-auto border-1 border-gray-3 p-4 bg-purple-1"></div>10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>12
</div>.align-self-start
xxxxxxxxxx1
<div class="grid columns-auto h-8 border-1">2
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>3
<div class="align-self-start border-1 border-gray-3 p-4 bg-purple-1"></div>4
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>6
</div>7
<div class="flex h-8 border-1">8
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>9
<div class="align-self-start border-1 border-gray-3 p-4 bg-purple-1"></div>10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>12
</div>.align-self-center
xxxxxxxxxx1
<div class="grid columns-auto h-8 border-1">2
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>3
<div class="align-self-center border-1 border-gray-3 p-4 bg-purple-1"></div>4
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>6
</div>7
<div class="flex h-8 border-1">8
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>9
<div class="align-self-center border-1 border-gray-3 p-4 bg-purple-1"></div>10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>12
</div>.align-self-end
xxxxxxxxxx1
<div class="grid columns-auto h-8 border-1">2
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>3
<div class="align-self-end border-1 border-gray-3 p-4 bg-purple-1"></div>4
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>6
</div>7
<div class="flex h-8 border-1">8
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>9
<div class="align-self-end border-1 border-gray-3 p-4 bg-purple-1"></div>10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>12
</div>.align-self-stretch
xxxxxxxxxx1
<div class="grid columns-auto h-8 border-1">2
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>3
<div class="align-self-stretch border-1 border-gray-3 p-4 bg-purple-1"></div>4
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>6
</div>7
<div class="flex h-8 border-1">8
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>9
<div class="align-self-stretch border-1 border-gray-3 p-4 bg-purple-1"></div>10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>12
</div>.justify-{position}
Aligns grid items along block axis or flex items along cross axis.
.justify-start
xxxxxxxxxx1
<small>.grid.justify-start</small>2
<div class="grid columns-auto justify-start">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-start</small>9
<div class="flex justify-start">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-start
.flex.justify-start
.justify-center
xxxxxxxxxx1
<small>.grid.justify-center</small>2
<div class="grid columns-auto justify-center">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-center</small>9
<div class="flex justify-center">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-center
.flex.justify-center
.justify-end
xxxxxxxxxx1
<small>.grid.justify-end</small>2
<div class="grid columns-auto justify-end">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-end</small>9
<div class="flex justify-end">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-end
.flex.justify-end
.justify-around
xxxxxxxxxx1
<small>.grid.justify-around</small>2
<div class="grid columns-auto justify-around">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-around</small>9
<div class="flex justify-around">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-around
.flex.justify-around
.justify-between
xxxxxxxxxx1
<small>.grid.justify-between</small>2
<div class="grid columns-auto justify-between">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-between</small>9
<div class="flex justify-between">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-between
.flex.justify-between
.justify-evenly
xxxxxxxxxx1
<small>.grid.justify-evenly</small>2
<div class="grid columns-auto justify-evenly">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-evenly</small>9
<div class="flex justify-evenly">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-evenly
.flex.justify-evenly
.justify-stretch
xxxxxxxxxx1
<small>.grid.justify-stretch</small>2
<div class="grid columns-auto justify-stretch">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-stretch</small>9
<div class="flex justify-stretch">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-stretch
.flex.justify-stretch
.justify-items-{position}
Justify grid items along block axis or flex items along cross axis.
.justify-items-start
xxxxxxxxxx1
<small>.grid.justify-items-start</small>2
<div class="grid columns-auto justify-items-start">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-items-start</small>9
<div class="flex justify-items-start">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-items-start
.flex.justify-items-start
.justify-items-center
xxxxxxxxxx1
<small>.grid.justify-items-center</small>2
<div class="grid columns-auto justify-items-center">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-items-center</small>9
<div class="flex justify-items-center">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-items-center
.flex.justify-items-center
.justify-items-end
xxxxxxxxxx1
<small>.grid.justify-items-end</small>2
<div class="grid columns-auto justify-items-end">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-items-end</small>9
<div class="flex justify-items-end">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-items-end
.flex.justify-items-end
.justify-items-baseline
xxxxxxxxxx1
<small>.grid.justify-items-baseline</small>2
<div class="grid columns-auto justify-items-baseline">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-items-baseline</small>9
<div class="flex justify-items-baseline">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-items-baseline
.flex.justify-items-baseline
.justify-items-stretch
xxxxxxxxxx1
<small>.grid.justify-items-stretch</small>2
<div class="grid columns-auto justify-items-stretch">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-items-stretch</small>9
<div class="flex justify-items-stretch">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-items-stretch
.flex.justify-items-stretch
.justify-self-{position}
Justify grid self along block axis or flex self along cross axis.
.justify-self-start
xxxxxxxxxx1
<small>.grid.justify-self-start</small>2
<div class="grid columns-auto justify-self-start">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-self-start</small>9
<div class="flex justify-self-start">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-self-start
.flex.justify-self-start
.justify-self-center
xxxxxxxxxx1
<small>.grid.justify-self-center</small>2
<div class="grid columns-auto justify-self-center">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-self-center</small>9
<div class="flex justify-self-center">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-self-center
.flex.justify-self-center
.justify-self-end
xxxxxxxxxx1
<small>.grid.justify-self-end</small>2
<div class="grid columns-auto justify-self-end">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-self-end</small>9
<div class="flex justify-self-end">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-self-end
.flex.justify-self-end
.justify-self-baseline
xxxxxxxxxx1
<small>.grid.justify-self-baseline</small>2
<div class="grid columns-auto justify-self-baseline">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-self-baseline</small>9
<div class="flex justify-self-baseline">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-self-baseline
.flex.justify-self-baseline
.justify-self-stretch
xxxxxxxxxx1
<small>.grid.justify-self-stretch</small>2
<div class="grid columns-auto justify-self-stretch">3
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>4
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>5
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>6
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>7
</div>8
<small>.flex.justify-self-stretch</small>9
<div class="flex justify-self-stretch">10
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>11
<div class="border-1 border-gray-3 p-8 bg-gray-1"></div>12
<div class="border-1 border-gray-3 p-6 bg-gray-1"></div>13
<div class="border-1 border-gray-3 p-4 bg-gray-1"></div>14
</div>.grid.justify-self-stretch
.flex.justify-self-stretch