Bootstrap 그리드 시스템

https://getbootstrap.kr/docs/5.3/layout/grid/

Bootstrap의 그리드 시스템은 일련의 컨테이너, 행, 열을 사용하여 콘텐츠를 레이아웃하고 정렬합니다. flexbox로 빌드되었으며 완전한 반응형입니다. 다음은 그리드 시스템이 함께 제공되는 방법에 대한 예와 자세한 설명입니다.

         <divclass="container text-center"><divclass="row"><divclass="col">      Column
</div><divclass="col">      Column
</div><divclass="col">      Column
</div></div></div>
         

위의 예에서는 사전 정의된 그리드 클래스를 사용하여 모든 기기와 뷰포트에 동일한 너비의 열 3개를 만듭니다. 이러한 열은 부모  .container 가 있는 페이지 중앙에 있습니다.

작동 원리 

이를 세분화하면 그리드 시스템이 함께 제공되는 방법은 다음과 같습니다:

• 우리 그리드는 여섯 개의 반응형 중단점. 중단점은  min-width  미디어 쿼리를 기반으로 합니다. 즉, 중단점과 그 위에 있는 모든 중단점에 영향을 미칩니다 (예:  .col-sm-4 는  sm ,  md ,  lg ,  xl ,  xxl 에 적용됨). 즉, 각 중단점별로 컨테이너 및 열 크기 및 동작을 제어할 수 있습니다.

• 컨테이너는 콘텐츠를 중앙에 놓고 가로로 채웁니다. 반응형 픽셀 너비에는  .container 를, 모든 뷰포트 및 디바이스에서  width: 100% 에는  .container-fluid 를, 유동 및 픽셀 폭의 조합에는 반응형 컨테이너 (예:  .container-md )를 사용합니다.

• 행은 열의 래퍼입니다. 각 열에는 열 사이의 공간을 제어하기 위한 수평  padding  (거터라고 함)이 있습니다. 그런 다음 이  padding 은 여백이 마이너스인 행에서 상쇄되어 열의 콘텐츠가 좌측 하단으로 시각적으로 정렬되도록 합니다. 또한 행은 열 크기를 균일하게 적용하고 거터 클래스를 통해 콘텐츠의 간격을 변경하는 수정자 클래스를 지원합니다.

• 열은 매우 유연합니다. 행 당 12개의 템플릿 열을 사용할 수 있으므로 여러 열에 걸쳐 있는 다양한 요소 조합을 만들 수 있습니다. 열 클래스는 확장할 템플릿 열의 수를 나타냅니다 (예:  col-4 는 4개 확장).  width 는 백분율로 설정되므로 항상 상대적인 크기가 동일합니다.

• 또한 거터는 반응형이고 사용자 정의가 가능합니다. 거터 클래스는 모든 중단점에서 사용할 수 있고, 마진 및 패딩 간격과 같은 크기입니다. 수평 거터는  .gx-*  클래스로, 수직 거터는  .gy-* 로, 모든 거터는  g-*  클래스로 변경하세요.  .g-0 은 거터를 제거하는 데에 사용할 수도 있습니다.

• Sass 변수, 맵, 믹스인은 그리드를 구동합니다. Bootstrap에서 미리 정의된 그리드 클래스를 사용하지 않으려면 그리드의 Sass 소스를 사용하여 추가적인 시멘틱 마크업으로 직접 생성할 수 있습니다. 또한 더 큰 유연성을 위해 이러한 Sass 변수를 사용하는 일부 CSS 사용자 정의 속성도 포함합니다.

제한 사항 및 flexbox 관련 버그, 일부 HTML 요소를 플렉스 컨테이너로 사용할 수 없음에 주의하세요.

그리드 옵션 

Bootstrap의 그리드 시스템은 6개의 기본 중단점과 사용자 정의한 모든 중단점에 걸쳐 적응할 수 있습니다. 6개의 기본 그리드 계층은 다음과 같습니다:

• Extra small (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Extra large (xl)
• Extra extra large (xxl)

위에서 언급했듯이 이러한 각 중단점에는 고유한 컨테이너, 고유한 클래스 접두어, 수정자가 있습니다. 다음은 이러한 중단점에서 그리드가 변경되는 방식입니다:

열 자동 레이아웃 

.col-sm-6 과 같이 명시적인 번호가 매겨진 클래스 없이 간편한 열 크기 조정을 위해 중단점별 열 클래스를 활용합니다.

동일 너비 

예를 들어서  xs 에서  xxl 까지 모든 기기와 뷰포트에 적용되는 두 가지 그리드 레이아웃이 있습니다. 필요한 각 중단점에 대해 단위 없는 클래스를 원하는 수만큼 추가하면 모든 열의 너비가 동일합니다.

         <divclass="container text-center"><divclass="row"><divclass="col">      1 of 2
</div><divclass="col">      2 of 2
</div></div><divclass="row"><divclass="col">      1 of 3