W3.CSS응답 유체 그리드

응답 그리드

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

효과를 볼 수있는 페이지의 크기를 조정!

응답 행

W3.CSS의 그리드 시스템은 반응이며, 열은 화면의 크기에 따라 자동으로 다시 드릴 것입니다 : 그것은 세 개의 열 구성 내용에 더 잘 볼 수있는 큰 화면에서,하지만 작은 화면에 콘텐츠의 경우 더 좋을 것이다 항목이 서로의 상부에 적층 하였다.

열이 충분히 반응 할 수있는 행 내부에 있어야합니다.

W3-COL은 다음과 같은 하위 클래스가 :

작은 화면에 대한 열 (일반 스마트 폰) :

매체 스크린의 열 (일반 정) :

대형 화면에 대한 열 (일반 노트북) :

클래스는 위보다 역동적이고 유연한 레이아웃을 만들 결합 할 수 있습니다.

각 클래스는 최대 확장, 그래서 당신은 소형, 중형, 대형 스크린에 동일한 너비를 설정하려면, 당신은 단지 작은 클래스를 지정해야합니다. 당신이 중형 및 대형 스크린에서 동일한 폭을 원한다면, 당신은 단지 매체 클래스를 지정해야합니다.

만 가능 매체 및 / 또는 큰 클래스를 사용하는 경우에는, 폭이 작은 화면에 항상 100 %로 변화된다.

참고 : 컬럼의 수는 항상 각 행 (6 + 6, 3 + 6 + 3, 9 + 3 등) 12 개까지 추가해야한다!

두 평등 열

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

두 동일하지 않은 열

모든 화면 크기에 불평등 한 폭 (25 % / 75 %)의 두 기둥 :

세 평등 열

모든 화면 크기에 세 동일한 폭의 열 (33.3 % / 33.3 % / 33.3 %) :

세 불평등 열

태블릿, 노트북과 데스크톱에 세 개의 다양한 폭의 열 (/ 50 % / 25 % 25 %). 휴대 전화에서 열이 자동으로 (100 % 폭) 스택합니다 :

참고 :이 예를 들어 당신이 배운 W3 분기 (m3), W3 반 (M6), W3 분기 (m3), 사용하는 것과 같습니다 W3.CSS 응답 장을.

여섯 열

태블릿, 노트북과 데스크톱에 식스 동일한 폭의 열 (16 % 각각). 휴대 전화에서 열이 자동으로 (100 % 폭) 스택합니다 :

혼합 : 모바일 및 노트북

당신은 역동적이고 유연한 레이아웃을 생성하는 클래스를 결합 할 수 있습니다. 이 예는 작은 화면에 큰 화면에 / 16.66 % 83.34 % (L8, L4) 분할 및 50 % / 50 % (S6, S6) 분할이있는 2 열 레이아웃을 생성합니다 :

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

이 예는 대형 스크린에 25 % / / 16.66 % 58.34 % (L3, L7, L2) 분할로 세 열 레이아웃을 생성 할 것이다, 50 % / 25 % / 25 % (M6, m3, m3) 중간 화면에서 분할 및 작은 화면에 33.3 % / 33.3 % / 33.3 % (S4, S4, S4) 분할 :

W3 행 및 W3 행 패딩의 차이

W3 행 패딩 클래스는 각 열에 8px 좌우 패딩을 추가하면서 W3 행 클래스는 패딩없는 용기를 정의

W3 행 :

W3 행 패딩 :

백분율을 사용하여

W3 받침대를 사용하여