gap

<!-- row-gap과 column-gap 개별 지정 -->
<div class="dg gtcr3-1fr rg2-4rem cg8px">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<!-- row-gap만 지정 (가로 간격 없음) -->
<div class="df fdc rg16px">
  <div>행 1</div>
  <div>행 2</div>
  <div>행 3</div>
</div>

<!-- column-gap만 지정 (세로 간격 없음) -->
<div class="df cg2rem">
  <div>열 1</div>
  <div>열 2</div>
  <div>열 3</div>
</div>

<!-- 카드 그리드 -->
<div class="dg gtcrfit-minmax28rem-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>

<!-- 버튼 그룹 -->
<div class="df gap8px">
  <button class="bg6366F1 cFFFFFF py8px px16px br8px bn cp">저장</button>
  <button class="bg27272A cFFFFFF py8px px16px br8px bn cp">취소</button>
</div>

<!-- 폼 필드 -->
<form class="df fdc gap16px">
  <input type="text" placeholder="이름" />
  <input type="email" placeholder="이메일" />
  <textarea placeholder="메시지"></textarea>
  <button class="bg6366F1 cFFFFFF py8px px16px br8px bn cp">전송</button>
</form>

<!-- 태그 목록 (줄바꿈 허용) -->
<div class="df fww gap8px">
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">HTML</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">CSS</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">JavaScript</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">Vue</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">Nuxt</span>
</div>