justify-items
Aligns all items along the inline axis (horizontal direction) in a grid container. Determines where items are positioned within each cell. Must be used with dg(display: grid).
Class List
| Class | CSS | Description |
|---|---|---|
jis | justify-items: start | Places items at the inline axis start of the cell |
jife | justify-items: flex-end | Places items at the inline axis end of the cell |
jic | justify-items: center | Centers items along the inline axis of the cell |
jist | justify-items: stretch | Stretches items to full cell width (default) |
Visual Comparison
Compares how each justify-items value affects the inline axis placement of grid items. The dashed lines represent the full cell area.
start — jis
Each item at cell left, taking content size
end — jife
Each item at cell right
center — jic
Each item at cell center
stretch (default value) — jist
Each item takes full cell width
Class Details
jisjustify-items: start
Places all grid items at the inline axis start (left) of the cell. Items only take up their content size.
<!-- Place grid items at cell start -->
<div class="dg gtcr3-1fr gap16px jis">
<div class="bg18181B p16px br4px">Left aligned</div>
<div class="bg18181B p16px br4px">Left aligned</div>
<div class="bg18181B p16px br4px">Left aligned</div>
</div>jifejustify-items: flex-end
Places all grid items at the inline axis end (right) of the cell.
<!-- Place grid items at cell end -->
<div class="dg gtcr3-1fr gap16px jife">
<div class="bg18181B p16px br4px">Right aligned</div>
<div class="bg18181B p16px br4px">Right aligned</div>
<div class="bg18181B p16px br4px">Right aligned</div>
</div>jicjustify-items: center
Centers all grid items along the inline axis of the cell. Items are horizontally centered within each cell.
<!-- Place grid items at cell center -->
<div class="dg gtcr3-1fr gap16px jic">
<div class="bg18181B p16px br4px">Center</div>
<div class="bg18181B p16px br4px">Center</div>
<div class="bg18181B p16px br4px">Center</div>
</div>
<!-- Icon grid center alignment -->
<div class="dg gtcr4-1fr gap2rem jic aic">
<div class="tac">Icon 1</div>
<div class="tac">Icon 2</div>
<div class="tac">Icon 3</div>
<div class="tac">Icon 4</div>
</div>jistjustify-items: stretch
Stretches all grid items to the full width of the cell. This is the grid default, so rarely needs explicit specification. Used to revert other justify-items values.
<!-- Default (stretch) - explicit -->
<div class="dg gtcr3-1fr gap16px jist">
<div class="bg18181B p16px br4px">Full width</div>
<div class="bg18181B p16px br4px">Full width</div>
<div class="bg18181B p16px br4px">Full width</div>
</div>
<!-- Responsive reset -->
<div class="dg gtcr3-1fr gap16px jic md-jist">
<div class="bg18181B p16px br4px">Default center, tablet stretch</div>
</div>justify-items vs justify-content
Understanding the difference between these two properties is important.
| justify-items | justify-content | |
|---|---|---|
| Target | 셀 안의 아이템 위치 | Overall position of grid tracks (columns) |
| Scope | 모든 셀의 아이템에 적용 | Applied to entire grid container |
| Default | stretch | start |
| Common Use Cases | 셀 내부 정렬 | Column placement in remaining space |
Responsive
Combined with media query prefixes, you can change grid item alignment based on screen size.
<!-- Desktop center, tablet stretch -->
<div class="dg gtcr3-1fr gap16px jic md-jist">
<div>Default center, stretch below 1024px</div>
</div>
<!-- Desktop start, mobile center -->
<div class="dg gtcr2-1fr gap16px jis sm-jic">
<div>Default left, center below 768px</div>
</div>Tips & Notes
Grid-only property
justify-items is only meaningful in dg(display: grid) containers. Does not work in flex containers.
Individual item override
To apply different alignment to specific items, use justify-self classes (jss, jsc, etc.) on the child.
stretch default value
The default justify-items for grid is stretch. Applying jis or jic shrinks items to content size.