W3.CSS 반응형 유체 그리드

반응형 그리드

W3.CSS는 12열 반응형 유체 그리드를 지원합니다.

효과를 보려면 페이지 크기를 조정하십시오!

반응형 행

W3.CSS의 그리드 시스템은 반응합니다. 열은 화면 크기에 따라 자동으로 재정렬됩니다. 큰 화면에서는 콘텐츠가 세 개의 열로 구성되어 더 잘 보일 수 있지만 작은 화면에서는 콘텐츠가 서로의 위에 쌓이면 더 좋을 수 있습니다.

w3-col에는 다음과 같은 하위 클래스가 있습니다.

작은 화면용 열(일반 스마트폰):

중간 화면용 열(일반 태블릿):

대형 화면용 열(일반적인 랩톱 및 데스크탑):

위의 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.

각 클래스가 확장되므로 작은, 중간 및 큰 화면에 대해 동일한 너비를 설정하려면 작은 클래스만 지정하면 됩니다. 그리고 중대형 화면에서 동일한 너비를 원할 경우 중형 등급만 지정하면 됩니다.

그러나 중형 및/또는 대형 클래스만 사용하는 경우 너비는 작은 화면에서 항상 100%로 변환됩니다.

참고: 열의 수는 각 행에 대해 항상 최대 12개까지 추가되어야 합니다(6+6, 3+3+6, 9+3 등)!

두 개의 동일한 열

모든 화면 크기에서 두 개의 동일한 너비 열(50%/50%):

두 개의 같지 않은 열

모든 화면 크기에서 너비가 다른 두 열(25%/75%):

3개의 동일한 열

모든 화면 크기에서 3개의 동일한 너비 열(33.3%/33.3%/33.3%):

3개의 같지 않은 열

태블릿, 랩톱 및 데스크톱에서 3개의 다양한 너비 열(25%/50%/25%). 휴대전화에서는 열이 자동으로 누적됩니다(너비 100%).

참고: 이 예제는 W3.CSS Responsive 챕터 에서 배운 w3-quarter(m3), w3-half(m6), w3-quarter(m3)를 사용하는 것과 동일합니다 .

여섯 개의 열

태블릿, 노트북 및 데스크탑에 동일한 너비의 열 6개(각각 16%). 휴대전화에서는 열이 자동으로 누적됩니다(너비 100%).

혼합: 모바일 및 노트북

클래스를 결합하여 동적이고 유연한 레이아웃을 만들 수 있습니다. 이 예에서는 큰 화면에서 83.34%/16.66%(l10, l2) 분할과 작은 화면에서 50%/50%(s6, s6) 분할이 있는 두 개의 열 레이아웃을 생성합니다.

혼합: 모바일, 태블릿 및 노트북

이 예는 큰 화면에서 25%/58.34%/16.66%(l3, l7, l2) 분할, 중간 화면에서 50%/25%/25%(m6, m3, m3) 분할로 3열 레이아웃을 생성합니다. 작은 화면에서 33.3%/33.3%/33.3%(s4, s4, s4) 분할:

w3-row와 w3-row-padding의 차이점

w3-row 클래스는 패딩이 없는 컨테이너를 정의하는 반면 w3-row-padding 클래스는 각 열에 8px 왼쪽 및 오른쪽 패딩을 추가합니다.

w3 행:

w3 행 패딩:

w3-rest 사용

w3-rest 클래스 는 그리드 열의 왼쪽을 사용하는 강력하고 유연한 클래스입니다.

백분율 사용

CSS 너비 속성을 사용하여 열의 특정 너비를 결정합니다.