Place Content
Utilities for controlling how grid items are aligned along both the block and inline axis directions.
Stretch
Use d-plc-stretch{-n} to stretch grid items along the block and inline axis.
<div class="d-d-grid d-g-cols2 d-plc-stretch">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Start
Use d-plc-start{-n} to align grid items along the start of the block and/or inline axis.
<div class="d-d-grid d-g-cols3 d-plc-start-center">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
End
Use d-plc-end{-n} to align grid items along the end of the block and/or inline axis.
<div class="d-d-grid d-g-cols3 d-plc-end-center">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Center
Use d-plc-center{-n} to align grid items along the center of the block and/or inline axis.
<div class="d-d-grid d-g-cols3 d-plc-center">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Space Evenly
Use d-plc-space-evenly{-n} to distribute grid items evenly along the block axis.
<div class="d-d-grid d-g-cols3 d-plc-space-evenly">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Space Around
Use d-plc-space-around{-n} to distribute grid items so there is an equal amount of space around each row on the block axis.
<div class="d-d-grid d-g-cols3 d-space-around">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Space Between
Use d-plc-space-between{-n} to distribute grid items along the block axis so that there is an equal space between each row.
<div class="d-d-grid d-g-cols3 d-plc-space-between">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>