display

The most fundamental property that determines how an element is rendered. It is the starting point of layout, and also flexand gridserves to activate.

Class List

Class	CSS	Description
`df`	display: flex	flex container. child horizontal direction placement
`dif`	display: inline-flex	Inline flex. Participates in text flow while applying flex behavior
`dg`	display: grid	Grid container. 2D layout
`db`	display: block	Block element. Occupies full line
`dib`	display: inline-block	Inline block. Flows like text with width/height applicable
`di`	display: inline	Inline element. Flows like text, width/height ignored
`dn`	display: none	Completely hidden. Exists in DOM but takes no space
`dt`	display: table	Acts like a table. Gives table layout to non-table elements
`dtc`	display: table-cell	Acts like a table cell. Useful for equal-height columns

Visual Comparison

Compares how each display value affects elements.

Block — db

Item 1Item 2Item 3

Each element occupies a full line

Flex — df

Item 1Item 2Item 3

Child elements are placed horizontally side by side

Inline Block — dib

Item 1Item 2Item 3

Flows like text with size control available

Inline — di

Item 1Item 2Item 3

width/height are ignored (only padding applies)

Grid (3column) — dg gtcr3-1fr

Item 1Item 2Item 3

Arranged in a 2D grid

None (Item 2 hidden) — dn

Item 1Item 2Item 3

Item 2 is hidden and its space is removed

dn vs vh -- Hiding Method Comparison

dn(display: none) and vh(visibility: hidden) both hide elements, but differ in whether space is occupied.

display: none — dn

Item 1Item 2Item 3

Space itself disappears. Items 1 and 3 are adjacent

visibility: hidden — vh

Item 1Item 2Item 3

Space is preserved. Item 2 slot is empty

	dn (display: none)	vh (visibility: hidden)
Takes up space	차지하지 않음 (완전히 제거)	차지함 (빈 공간 유지)
Screen reader	읽지 않음	읽지 않음
Event receiving	불가	불가
Transition	불가 (on/off 전환)	가능 (opacity와 조합)
child element	모두 숨김	자식에 vv 부여 시 개별 표시 가능
Common Use Cases	반응형 숨김, 조건부 렌더링	레이아웃 유지하며 숨김

When to Use What?

Situation	Recommended	Reason
1차원 가로/세로 배치	`df`	flex는 한 방향 정렬에 최적화
2차원 행/열 레이아웃	`dg`	grid는 행과 열을 동시에 제어
태그, 뱃지 나열	`dib`	텍스트 흐름 + 크기 제어
전체 너비 섹션	`db`	기본 블록 흐름
반응형 숨김/표시	`dn / db`	sm-dn, md-db 등 미디어 조합
동일 높이 컬럼	`dt + dtc`	테이블 셀의 자동 높이 맞춤
아이콘 + 텍스트 정렬	`dif`	inline-flex로 텍스트 흐름 유지

Class Details

`df`display: flex

Arranges child elements horizontally side by side. The most used layout class in Atomic CSS, combined with jcc, aic, gap, etc.

<!-- Horizontal alignment + center -->
<div class="df jcc aic gap16px">
  <span>Logo</span>
  <nav>Menu</nav>
  <button>CTA</button>
</div>

<!-- Vertical alignment (form) -->
<div class="df fdc gap8px">
  <input type="text" placeholder="Name" />
  <input type="email" placeholder="Email" />
  <button>Sign Up</button>
</div>

<!-- Space-between alignment (header) -->
<header class="df jcsb aic px2rem py16px">
  <div>Logo</div>
  <nav class="df gap2rem">
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

Common Combinations

`df jcc aic`	Center alignment both horizontally and vertically
`df jcsb aic`	Space between alignment (header, navigation)
`df fdc gap8px`	Vertical direction + gap (forms, lists)
`df fww gap16px`	Wrapping allowed (tags, card lists)
`df aic gap8px`	Vertical center + gap (icon + text)

`dif`display: inline-flex

Participates in text flow as an inline element externally, while internal children follow flex rules. Used when alignment is needed inside inline elements such as icon + text, badges, etc.

<!-- Icon + text badge -->
<p>
  Status:
  <span class="dif aic gap4px bg34D399 c000000 py2px px8px br4px fs13px">
    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
    </svg>
    Active
  </span>
  element.
</p>

df vs dif difference

텍스트 df: 줄 전체 차지 텍스트

텍스트 dif: 인라인 흐름 텍스트

`dg`display: grid

Activates 2D grid layout. Must be used with gtc(grid-template-columns). Suitable for card lists, dashboards, galleries, etc.

<!-- 3-column equal cards -->
<div class="dg gtcr3-1fr gap2rem">
  <div class="bg18181B p2rem br8px">Card 1</div>
  <div class="bg18181B p2rem br8px">Card 2</div>
  <div class="bg18181B p2rem br8px">Card 3</div>
</div>

<!-- Responsive auto-fit (auto-adjusts to screen) -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div class="bg18181B p2rem br8px">Auto column count</div>
  <div class="bg18181B p2rem br8px">Responds to screen size</div>
  <div class="bg18181B p2rem br8px">Minimum 28rem guaranteed</div>
</div>

<!-- Sidebar + Main -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside class="bg18181B p2rem br8px">Sidebar</aside>
  <main class="bg27272A p2rem br8px">Main Content</main>
</div>

Common Combinations

`dg gtcr3-1fr gap2rem`	3-column equal grid
`dg gtcrfit-minmax28rem-1fr gap2rem`	Responsive auto-fit (automatic column adjustment)
`dg gtc25rem-1fr gap2rem`	Sidebar + main layout
`dg gtrauto-1fr-auto h100vh`	Header-main-footer full height
`dg pic`	center alignment (place-items: center)

`db`display: block

Makes a block element that occupies a full line. Since div, p, etc. default to block, mainly used to convert inline elements to block or paired with dn for responsive layouts.

<!-- Convert inline to block -->
<span class="db w100p py12px bg18181B tac">Full width banner</span>

<!-- Responsive display toggle -->
<div class="db sm-dn">Desktop only</div>
<div class="dn sm-db">Mobile only</div>

`dib`display: inline-block

Flows horizontally like text while allowing width, height, and vertical margin to be applied. Used for tags, badges, button groups, etc.

<!-- Tag list -->
<div>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">HTML</span>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">CSS</span>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">JavaScript</span>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">TypeScript</span>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">Vue</span>
</div>

<!-- Inline element with dimensions -->
<span class="dib w10rem h10rem bg6366F1 br8px"></span>
<span class="dib w8rem h8rem bg34D399 br8px ml8px"></span>

`di`display: inline

Fully participates in text flow. width, height, vertical marginare ignored. Used to force block elements to inline.

<!-- Convert block to inline -->
<div class="di">This div</div>
<div class="di">flows as</div>
<div class="di">inline</div>

Caution

diignores width, height, and vertical margins. To control size, use dib.

`dn`display: none

Completely hides the element. Takes no space and is not read by screen readers. Most commonly used for responsive show/hide.

<!-- Responsive Hidden -->
<div class="db sm-dn">Hidden below 768px</div>
<div class="dn sm-db">768px shown only below this breakpoint</div>

<!-- Conditional display (JS combination) -->
<div :class="isOpen ? 'db' : 'dn'">
  Toggle content
</div>

Accessibility note

dnis completely hidden from screen readers as well. To hide visually only while exposing to screen readers, use a separate sr-only pattern.

`dtdtc`display: table / table-cell

Gives table behavior to non-table elements. Setting children to dtcautomatically creates equal-height columns.

<!-- Equal height 2 columns -->
<div class="dt w100p">
  <div class="dtc p2rem bg18181B vat w50p">
    Short content
  </div>
  <div class="dtc p2rem bg27272A vat w50p">
    Even with long content, both cells maintain
    equal height.
    Thanks to table cell auto height matching.
  </div>
</div>

Responsive Show/Hide

Combined with media query prefixes, elements can be shown or hidden on specific screens.

<!-- Desktop only -->
<div class="db sm-dn">Desktop only content</div>

<!-- Mobile only -->
<div class="dn sm-db">Mobile only content</div>

<!-- Switch to vertical below tablet -->
<div class="df md-fdc gap16px">
  <div>Left</div>
  <div>Right → below on tablet and smaller</div>
</div>

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Class Combination	Behavior
`db sm-dn`	Default visible, hidden at 768px and below
`dn sm-db`	Default hidden, visible only at 768px and below
`df md-dn`	Default flex, hidden at 1024px and below
`dn md-df`	Default hidden, flex only at 1024px and below
`dg lg-dn`	Default grid, hidden at 1280px and below
`db es-dn`	Default visible, hidden at 640px and below

Pseudo-class Combinations

Display can be changed on hover, focus, and other states.

<!-- Show dropdown on hover -->
<div class="pr">
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Open menu</button>
  <ul class="pa t100p l0 dn hover-db bg18181B b1pxsolid27272A br8px p16px mt4px lsn">
    <li class="py4px">Item 1</li>
    <li class="py4px">Item 2</li>
    <li class="py4px">Item 3</li>
  </ul>
</div>

Tips & Notes

df vs dg selection criteria

If controlling only one direction (horizontal or vertical), use df. If controlling both rows and columns, use dg.

Difference between inline-flex and inline-block

difis inline externally but internal children follow flex rules. dibsimply adds size control to inline flow.

Responsive hiding pattern

Set the default and switch with media queries. Example: db sm-dnmeans "visible by default, hidden at 768px and below". The opposite is dn sm-db.

visibility flex-direction grid-template-columns overflow Responsive design

display

Class List

Visual Comparison

dn vs vh -- Hiding Method Comparison

When to Use What?

Class Details

dfdisplay: flex

difdisplay: inline-flex

dgdisplay: grid

dbdisplay: block

dibdisplay: inline-block

didisplay: inline

dndisplay: none

dtdtcdisplay: table / table-cell

Responsive Show/Hide

Pseudo-class Combinations

Tips & Notes

Related Properties

`df`display: flex

`dif`display: inline-flex

`dg`display: grid

`db`display: block

`dib`display: inline-block

`di`display: inline

`dn`display: none

`dtdtc`display: table / table-cell