Bootstrap 5 그리드 예제

이전 페이지 BS5 그리드 XXL
다음 페이지 BS5 기본 템플릿

아래에 Bootstrap 5 그리드 레이아웃의 예제를 정리했습니다.

세분열 열

지정된 요소 수에 사용 .col 클래스를 사용하여 요소의 수를 결정하면(Bootstrap는 동일한 너비의 열을 생성합니다). 다음 예제에서는 각 요소의 너비가 33.33%인 세 개의 col 요소를 사용했습니다.

예제

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

직접 시험해보세요

숫자를 사용한 세 개의 같은 열

열 너비를 제어하기 위해 숫자를 사용할 수 있습니다. 총 합이 12 또는 그 이하여야 합니다(모든 12 개의 사용 가능한 열을 사용하지 않아도 됩니다):

예제

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

직접 시험해보세요

세 불일치 열

불일치하는 열을 생성하려면 숫자를 사용해야 합니다. 다음 예제는 25%/50%/25%의 분할을 생성합니다:

예제

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

직접 시험해보세요

한 열 너비 설정

그러나 한 열의 너비만 설정하면 충분하며, 형제 열이 주변에서 자동으로 크기를 조정됩니다. 다음 예제는 25%/50%/25%의 분할을 생성합니다:

예제

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

직접 시험해보세요

Row Cols

또한 사용할 수 있습니다: .row-cols-* 클래스 제어는 각각의 옆에 있는 열 수에 나타나야 합니다(열이 얼마나 많이 있든):

예제

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

직접 시험해보세요

높이 일치

한 열이 다른 열보다 높다면(텍스트나 CSS 높이의 이유로 인해), 나머지는 그에 따라 따라가게 됩니다:

예제

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

직접 시험해보세요

내포된 열

다음은 두 열 레이아웃을 생성하는 방법을 보여줍니다. 한 열 내에 또 다른 두 열이 있습니다:

예제

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>

직접 시험해보세요

응답 클래스

Bootstrap 5 그리드 시스템에는 다섯 가지 클래스가 있습니다:

.col- (초소형 장치 - 스크린 너비가 576픽셀 미만)
.col-sm- (소형 장치 - 스크린 너비가 576픽셀 이상)
.col-md- (중형 장치 - 스크린 너비가 768픽셀 이상)
.col-lg- (대형 장치 - 스크린 너비가 992픽셀 이상)
.col-xl- (xlarge 장치 - 스크린 너비가 1200px 이상)
.col-xxl- (xxlarge 장치 - 스크린 너비가 1400px 이상)

위의 클래스를 조합하여 더 동적이고 유연한 레이아웃을 생성할 수 있습니다.

훌륭합니다:각 클래스는 비례적으로 확대되므로, 다음과 같은 경우: sm 그리고 md 같은 너비를 설정하려면 다음을 지정하면 됩니다: sm。

쌓여 수평으로

다음은 열 레이아웃을 생성하는 방법을 보여줍니다. 이 레이아웃은 초소형 장치에서는 쌓여 있으며, 더 큰 장치(sm, md, lg 및 xl)에서는 수평 레이아웃으로 변환됩니다:

예제

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

직접 시험해보세요

Mix 및 Match

예제

<!-- 초소형 장치에서 50%/50% 분할, 대형 장치에서 75%/25% 분할 -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 초소형, 소형, 중형 장치에서 58%/42% 분할, 대형 및 초대형 장치에서 66.3%/33.3% 분할 -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- 소형 장치에서 25%/75% 분할, 중형 장치에서 50%/50% 분할, 대형 및 초대형 장치에서 33%/66% 분할. 초소형 장치에서는 자동으로 쌓입니다(100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

직접 시험해보세요

가로선 없음

칸 사이의 간격(추가 공간)을 변경하려면 어떤 .g-1|2|3|4|5 클래스(.g-4 은 기본 값입니다).

가로선(그터터)을 완전히 제거하려면 다음을 사용하세요 .g-0：

예제

<div class="row g-0">

직접 시험해보세요

이전 페이지 BS5 그리드 XXL
다음 페이지 BS5 기본 템플릿

강의 일정

Bootstrap 5 강의

Bootstrap 5 양식