[Bootstrap] 그리드(Grid)

안녕하세요. 명월입니다.

이 글은 부트스트랩의 그리드(Grid)에 대한 설명입니다.

웹 디자인, 설계를 할 때, 개인적으로 가장 어려운 부분은 레이아웃 설정하는 것이 가장 어렵다고 생각됩니다.

크게는 기본적으로 헤더, 본문, 푸터 식으로 나뉘고 작게는 본문 안에 메뉴, 본 컨텐츠 또는 리스트, 페이징 그 밖에 링크 등등의 형태로 구성됩니다.

이럴 때 레이아웃 설정을 단순히 세로 정렬로 나누는 것만이 아닌 가로 순으로도 나누어야 할 때가 있습니다.

단순히 세로 정렬이라고하면 스크롤이 어색하지도 않고 유저가 많이 학습이 된 상황이라 크게 어렵지 않으나 가로 정렬의 경우는 유저가 가로 스크롤이 익숙치도 않고 또 모든 디바이스 환경의 모니터 너비는 다르기 때문에 그 환경에 맞추어 설정하기가 쉽지가 않습니다.

부트스트랩에서는 이 디바이스 종류를 크게 5단계로 나누어 설계를 했습니다.

이전에 부트스트랩에서 레이아웃에 대해 설명한 적이 있습니다.

링크 - [Bootstrap] 레이아웃 설정

부트스트랩에서 Grid는 단순히 테이블을 나타내는 것이 아니라 화면을 분할하는 의미입니다.

Grid는 가로의 화면 분할을 12로 분할합니다. 먼저 상위 클래스로 row를 지정한 다음 하위 태그로 col 클래스를 사용하면 grid가 생성됩니다.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

하나의 row 클래스 안에 col이 3개가 있으면 4/12, 4/12, 4/12로 각각 너비가 33.33%의 div가 3개가 생성됩니다.

그리고 너비를 지정할 수도 있는데 col-3,col-5가 두개가 있으면 3/2, 5/12너비의 div와 4/12크기의 공백이 생깁니다.

<style>
  .row div {
    border: 1px solid;
  }
</style>
<div class="container-fluid">
  <div class="row">
    <!-- 4 / 12 분할 -->
    <div class="col">
      1 of 3
    </div>
    <!-- 4 / 12 분할 -->
    <div class="col">
      2 of 3
    </div>
    <!-- 4 / 12 분할 -->
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <!-- 3 / 12 분할 -->
    <div class="col-3">
      1 of 3
    </div>
    <!-- 5 / 12 분할 -->
    <div class="col-5">
      2 of 3
    </div>
    <!-- 4 / 12 공백 -->
  </div>
</div>

위 테이블을 보면 클래스 어미에 -sm-, -md-가 붙는 것이 있습니다.

이는 디바이스에 따라 분할되는 것을 구분한 것입니다.

<style>
  .row div {
    border: 1px solid;
  }
</style>
<div class="container-fluid">
  <div class="row">
    <!-- 576px 이하는 4 / 12 분할 -->
    <!-- 768px 이상은 2 / 12 분할 -->
    <!-- 1200px 이상은 1 / 12 분할 -->
    <div class="col-4 col-md-2 col-xl-1">
      1 of 3
    </div>
    <!-- 576px 이하는 4 / 12 분할 -->
    <!-- 768px 이상은 2 / 12 분할 -->
    <!-- 1200px 이상은 1 / 12 분할 -->
    <div class="col-4 col-md-2 col-xl-1">
      2 of 3
    </div>
    <!-- 576px 이하는 4 / 12 분할 -->
    <!-- 768px 이상은 2 / 12 분할 -->
    <!-- 1200px 이상은 1 / 12 분할 -->
    <div class="col-4 col-md-2 col-xl-1">
      3 of 3
    </div>
  </div>
</div>

그리고 마지막으로 만약 12분할로 계산을 하는데 그 값이 초과가 되면 자동으로 개행으로 이루어 집니다.

<style>
  .row div {
    border: 1px solid;
  }
</style>
<div class="container-fluid">
  <div class="row">
    <!-- 4 / 12 분할 -->
    <div class="col-4">
      1 of 3
    </div>
    <!-- 4 / 12 분할 -->
    <div class="col-4">
      2 of 3
    </div>
    <!-- 4 / 12 분할 -->
    <div class="col-4">
      3 of 3
    </div>
    <!-- 12를 초과하기 때문에 개행이 된다. -->
    <div class="col-4">
      개행
    </div>
  </div>
</div>

여기까지 부트스트랩의 그리드(Grid)에 대한 설명였습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.