Fixed Grid

Fixed Grid (고정 그리드)

최소 컬럼 너비 대신 고정된 컬럼 수를 원한다면, 그리드를 fixed-grid 컨테이너로 감싸면 돼요. 기본적으로 이 고정 그리드는 2개 컬럼을 가져요.

출처: 문서

본문

최소 컬럼 너비 대신 고정된 컬럼 수를 원한다면, 그리드를 fixed-grid 컨테이너로 감싸면 돼요.

기본적으로 이 고정 그리드는 2개 컬럼을 가져요:

Cell 1 · Cell 2 · Cell 3 · Cell 4 · Cell 5 · Cell 6 · Cell 7 · Cell 8 · Cell 9 · Cell 10 · Cell 11 · Cell 12

<div class="fixed-grid">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3</div>
    <div class="cell">Cell 4</div>
    <div class="cell">Cell 5</div>
    <div class="cell">Cell 6</div>
    <div class="cell">Cell 7</div>
    <div class="cell">Cell 8</div>
    <div class="cell">Cell 9</div>
    <div class="cell">Cell 10</div>
    <div class="cell">Cell 11</div>
    <div class="cell">Cell 12</div>
  </div>
</div>

고정 그리드 수정자 적용하기 (Applying fixed grid modifiers)

has-$n-cols 수정자 클래스를 추가해서 컬럼 수를 바꿀 수 있어요. 값은 1부터 12까지예요:

클래스 컬럼 수
has-0-cols 0
has-1-cols 1
has-2-cols 2
has-3-cols 3
has-4-cols 4
has-5-cols 5
has-6-cols 6
has-7-cols 7
has-8-cols 8
has-9-cols 9
has-10-cols 10
has-11-cols 11
has-12-cols 12

컨테이너 브레이크포인트 (Container breakpoints)

브레이크포인트별로 다른 컬럼 수를 지정할 수 있어요:

컬럼 수 모바일(Mobile) 768px까지 태블릿(Tablet) 769px부터 데스크톱(Desktop) 1024px부터 와이드스크린(Widescreen) 1216px부터 풀HD(Full HD) 1408px부터
1 has-1-cols-mobile has-1-cols-tablet has-1-cols-desktop has-1-cols-widescreen has-1-cols-fullhd
2 has-2-cols-mobile has-2-cols-tablet has-2-cols-desktop has-2-cols-widescreen has-2-cols-fullhd
3 has-3-cols-mobile has-3-cols-tablet has-3-cols-desktop has-3-cols-widescreen has-3-cols-fullhd
4 has-4-cols-mobile has-4-cols-tablet has-4-cols-desktop has-4-cols-widescreen has-4-cols-fullhd
5 has-5-cols-mobile has-5-cols-tablet has-5-cols-desktop has-5-cols-widescreen has-5-cols-fullhd
6 has-6-cols-mobile has-6-cols-tablet has-6-cols-desktop has-6-cols-widescreen has-6-cols-fullhd
7 has-7-cols-mobile has-7-cols-tablet has-7-cols-desktop has-7-cols-widescreen has-7-cols-fullhd
8 has-8-cols-mobile has-8-cols-tablet has-8-cols-desktop has-8-cols-widescreen has-8-cols-fullhd
9 has-9-cols-mobile has-9-cols-tablet has-9-cols-desktop has-9-cols-widescreen has-9-cols-fullhd
10 has-10-cols-mobile has-10-cols-tablet has-10-cols-desktop has-10-cols-widescreen has-10-cols-fullhd
11 has-11-cols-mobile has-11-cols-tablet has-11-cols-desktop has-11-cols-widescreen has-11-cols-fullhd
12 has-12-cols-mobile has-12-cols-tablet has-12-cols-desktop has-12-cols-widescreen has-12-cols-fullhd

자동 카운트 고정 그리드 (Auto Count Fixed Grid)

has-auto-count 수정자를 추가하면 고정 그리드가 각 브레이크포인트에 맞게 컬럼 수를 자동으로 바꿔요:

  • 모바일에서 2
  • 태블릿에서 4
  • 데스크톱에서 8
  • 와이드스크린에서 12
  • 풀HD에서 16

Cell 1 · Cell 2 · Cell 3 · Cell 4 · Cell 5 · Cell 6 · Cell 7 · Cell 8 · Cell 9 · Cell 10 · Cell 11 · Cell 12 · Cell 13 · Cell 14 · Cell 15 · Cell 16

<div class="fixed-grid has-auto-count">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3</div>
    <div class="cell">Cell 4</div>
    <div class="cell">Cell 5</div>
    <div class="cell">Cell 6</div>
    <div class="cell">Cell 7</div>
    <div class="cell">Cell 8</div>
    <div class="cell">Cell 9</div>
    <div class="cell">Cell 10</div>
    <div class="cell">Cell 11</div>
    <div class="cell">Cell 12</div>
    <div class="cell">Cell 13</div>
    <div class="cell">Cell 14</div>
    <div class="cell">Cell 15</div>
    <div class="cell">Cell 16</div>
  </div>
</div>

더 알아보기 (Learn more)