[CSS]부트스트랩 문서 확인하기(그리드)

[그리드 관련 문서 홈페이지]

getbootstrap.com/docs/4.5/layout/grid/

Grid system

 

[Equal-width multi-line]

1) .w-100 클래스를 사용하여 개행을 줄 수 있다.

row를 두개 만드는 수고를 덜 수 있다.

 

 

2) 조건부 개행이다. d-none과 d-md-block으로 md 이상일 때 적용하고, 그 아래로는 강제개행이 안된다.

 

 

[Setting one column width]

가운데 col만 숫자를 넣어주면 양쪽 col은 남은 영역을 나눠 갖는다.

 

 

[Variable width content]

-col-md-auto : 컨텐츠의 너비에 따라 너비가 가변적으로 변한다. 자신이 필요한 최소한의 영역만 가진다.

여기선 innerText인 Variable width content만큼만 차지한다. (단, md가 있으니, md 영역에서만 적용된다.)

 

-justify-content-md-center : 을 통해 가운데 정렬을 할 수 있다. (단 md 가 있으니, md영역에서만 적용된다.)

 

 

[gutters]

gutters는 컬럼간 간격을 의미한다.

 

[no gutters]

no gutters 클래스로 컬럼 간 간격을 없앨 수 있다.

 

 

[Alignment]

row에 align-items-[start/center/end]로 설정해 컨테이너 내에서 정렬을 해줄 수 있다.

 

 

[Column wrapping과 Column breaks]

Column wrapping : col 뒤에 숫자 col-* 의 총 합계가 12를 넘어가면 col은 흘러내린다.

Column breaks : .w-100 클래스로 col을 강제로 개행시킬 수 있다.

 

 

 

 

[Order classes]

order-숫자 클래스를 이용하여 col의 칼럼정렬을 할 수 있다.

정의 순서와 상관없이 숫자가 작을 수록 우선순위가 높다.

 

 

order-first, order-last를 이용해서도 칼럼정렬을 할 수 있다. 

 

사용이유?

보통 content-nav 구성으로 웹페이지를 많이 구성하는데

화면이 좁아지면 content가 위로 nav가 아래로 내려가게 되는 상황이 올 수 있다.

 

이때 화면이 좁아지더라도 nav를 위로 올려 이상적인 화면구조를 이끌어 내고 싶다면

(보통 nav가 위에 content보다 위에 위치)

order 클래스를 사용하여 재정렬하면 된다.

 

그리고 nav-content 구성을 웹페이지를 구성해서 화면이 좁아지더라도 nav가 위에 올 수 있게 할 수 있지만

nav-content구성은 원하지 않는 화면구성이라면 위의 방법대로 order클래스를 이용하면 된다. 

 

 

 

[Offset]

offset을 이용해 왼쪽 margin을 주는 효과를 줄 수 있다. 

offset-md-3 : md 영역에서 왼쪽에 margin을 col 3개만큼 주겠다!