재단 그리드 예
아래 우리는 일반적인 그리드의 몇 가지 예를 수집했다.
세 개의 동일한 열
이 예는 작은 장치의 중간 및 대규모 장비, 자동 적재에 세 개의 열을 나타내는 세 개의 동일한 열 (33.3 % / 33.3 % / 33.3 %)을 만드는 방법을 보여줍니다 :
예
<사업부 클래스 = "중간 4 열"스타일 = "배경 색 : 노란색;">
<P> .medium-4 </ P>
</ DIV>
<사업부 클래스 = "중간 4 열"스타일 = "배경 색 : 핑크;">
<P> .medium-4 </ P>
</ DIV>
<사업부 클래스 = "중간 4 열"스타일 = "배경 색 : 노란색;">
<P> .medium-4 </ P>
</ DIV>
</ DIV>
»시도
세 불평등 열
이 예는 중간 및 대규모 장비, 소형 기기에 자동 적재에 세 개의 열을 나타내는 세 가지 불평등 한 칼럼 (25 % / 50 % / 25 %)을 만드는 방법을 보여줍니다 :
예
<사업부 클래스 = "중간 3 열"스타일 = "배경 색 : 노란색;">
<P> .medium-3 </ P>
</ DIV>
<사업부 클래스 = "중간 6 열"스타일 = "배경 색 : 핑크;">
<P> .medium-6 </ P>
</ DIV>
<사업부 클래스 = "중간 3 열"스타일 = "배경 색 : 노란색;">
<P> .medium-3 </ P>
</ DIV>
</ DIV>
»시도
두 동일한 열
이 예는 항상 50 % / 50 % 이상이 동일한 컬럼 (50 % / 50 %), 소형, 중형 및 대형 장비의 비율을 만드는 방법을 보여줍니다 :
예
<사업부 클래스 = "작은 6 열"스타일 = "배경 색 : 노란색;">
<P> .small-6 </ P>
</ DIV>
<사업부 클래스 = "작은 6 열"스타일 = "배경 색 : 핑크;">
<P> .small-6 </ P>
</ DIV>
</ DIV>
»시도
두 불평등 열
이 예는 33.3 % / 66.6 % 이상 항상이 동일하지 않은 열 (33.3 % / 66.6 %), 소형, 중형 및 대형 장비의 비율을 만드는 방법을 보여줍니다 :
예
<사업부 클래스 = "작은-8 열"스타일 = "배경 색 : 노란색;">
<P> .small-8 </ P>
</ DIV>
<사업부 클래스 = "작은 4 열"스타일 = "배경 색 : 핑크;">
<P> .small-4 </ P>
</ DIV>
</ DIV>
»시도
열 순서 수정
사용하여 .small|medium|large-push-* 및 .small|medium|large-pull-* 클래스는 컬럼의 순서를 수정합니다 :
예
<사업부 클래스 = "작은 4 작은 8 푸시 열"스타일 = "배경 색 : 노란색;">
<P> .small-4 .small- 8 푸시 </ P>
</ DIV>
<사업부 클래스 = "작은-8 작은 4 풀 열"스타일 = "배경 색 : 핑크;">
<P> .small-8 .small- 4 풀 </ P>
</ DIV>
</ DIV>
»시도
중첩 된 열
당신은 중첩 된 그리드 (열 삽입 열)를 사용할 수 있습니다 :
예
<사업부 클래스 = "작은-8 열"> .small-8
<사업부 클래스 = "행">
<사업부 클래스 = "작은-8 열"> .small-8 중첩
<사업부 클래스 = "행">
<사업부 클래스 = "작은-8 열"> .small-8 중첩 다시 </ DIV>
<사업부 클래스 = "작은 4 열"> .small-4 </ DIV>
</ DIV>
</ DIV>
<사업부 클래스 = "작은 4 열"> .small-4 </ DIV>
</ DIV>
</ DIV>
<사업부 클래스 = "작은 4 열"> .small-4 </ DIV>
</ DIV>
»시도
혼합 : 모바일, 데스크톱,
: 국제 교류 재단 그리드 시스템은 세 개의 열이 .small-* (휴대 전화), .medium-* (평면), 및 .large-* (바탕 화면). 이러한 클래스는 동적으로 레이아웃이보다 유연하게 조합하여 사용할 수있다 :
팁 : 지정된 소형 및 대형 스크린 장치의 폭이 설정 될 수 원한다면 각 클래스는 확대 될 수 .small-* .
예
<사업부 클래스 = "소형 6 대 8 열"> .small-6 .large-8 </ DIV>
<사업부 클래스 = "소형 6 대 4 열"> .small-6 .large-4 </ DIV>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "소형 2 대 4 열"> .small-2 .large-2 </ DIV>
<사업부 클래스 = "작은 4 대 4 열"> .small-4 .large-2 </ DIV>
<사업부 클래스 = "소형 6 대 4 열"> .small-6 .large-2 </ DIV>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "작은 3 대 5 열"> .small-3 .large-5 </ DIV>
<사업부 클래스 = "작은-9 대 7 열"> .small-9 .large-7 </ DIV>
</ DIV>
»시도
혼합 : 모바일, 태블릿 및 데스크탑 장치
예
<사업부 클래스 = "중간 6 대 8 열"> .medium-6 .large-8 </ DIV>
<사업부 클래스 = "중간 6 대 4 열"> .medium-6 .large-4 </ DIV>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "작은 4 중간 3 대 7 열"> .small-4 .medium-3 .large-7 </ DIV>
<사업부 클래스 = "작은 4 중간 6 대 3 열"> .small-4 .medium-6 .large-3 </ DIV>
<사업부 클래스 = "작은 4 중간 3 대 2 열"> .small-4 .medium-3 .large-2 </ DIV>
</ DIV>
»시도
중간 열
당신은 센터 컬럼 사용할 수 있습니다 .small-centered 클래스를. 중형 및 대형 장비는 소형 기기를 중심으로 상속,하지만 당신은 큰 장비를 중심으로 클래스를 설정해야 할 수 있습니다 .large-centered .
예
<사업부 클래스 = "작은 네 작은 중심의 열"> 작은 네 작은 중심 </ DIV>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "소형 6 소형 중심의 열"> 소형 6 소형 중심으로 </ DIV>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "작은 6 대를 중심으로 열"> 작은 6 대를 중심으로 </ DIV>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "작은-8 작은 중심의 대형 uncentered 열"> 작은-8 작은 중심의 대형 uncentered </ DIV>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "작은-10 소형 중심의 열"> 작은-10 소형을 중심으로 </ DIV>
</ DIV>
»시도
열 오프셋
당신이 사용할 수있는 .large-offset-* (또는 .small-offset-* ) 클래스를, 오른쪽에있는 열을 설정합니다. 별표 (*)를 사용하여 컨트롤의 왼쪽 여백에 열 수 :
예
<사업부 클래스 = "큰-1 열"> 1 </ DIV>
<사업부 클래스 = "큰-11 열"> 11 </ DIV>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "큰-1 열"> 1 </ DIV>
<사업부 클래스 = "큰 10 대 오프셋 1 열"> 10 일 </ DIV> 오프셋 (offset)
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "큰-1 열"> 1 </ DIV>
<사업부 클래스 = "큰-9 큰 오프셋 2 열"> 9, 2 </ DIV> 오프셋 (offset)
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "큰-1 열"> 1 </ DIV>
<사업부 클래스 = "대형 8 대 오프셋 3 열"> (8), 3 </ DIV> 오프셋 (offset)
</ DIV>
»시도
불완전한 열
열 행의 수와하지 (12)는, 재단은 자동으로 오른쪽 플로트 마지막 하나는 나머지 열을 작성하기가 비어있을 경우.
옵션 .end 왼쪽 플로트에 마지막 세트에 대한 요소 카테고리 :
예
<사업부 클래스 = "중간 3 열"> .medium-3 </ DIV>
<사업부 클래스 = "중간 3 열"> .medium-3 </ DIV>
<사업부 클래스 = "중간 3 열"> .medium-3 </ DIV>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "중간 3 열"> .medium-3 </ DIV>
<사업부 클래스 = "중간 3 열"> .medium-3 </ DIV>
<사업부 클래스 = "중간 3 .medium-3 .END </ DIV> 열은 끝">
</ DIV>
와이드 스크린
그리드 ( .row )의 최대 크기 (최대 폭)은 62.5rem이다. 와이드에서 62.5rem 크기보다 클 수 있고,이 열은 폭이 100 %로 설정 한 경우에도 페이지 완전 충전되지 않을 것이다. 그러나 우리는 CSS를 통해 새 최대 폭을 설정할 수 있습니다 :
기본 최대 폭하지만 간 전체 페이지의 배경색을 사용하려는 경우, 당신은 컨테이너 요소에 사용할 .row 클래스, 당신은 배경 색상을 지정해야합니다 :
예
<사업부 클래스 = "행">
<사업부 클래스 = "작은 6 열"스타일 = "배경 색 : 노란색;"> .small-6 </ DIV>
<사업부 클래스 = "작은 6 열"스타일 = "배경 색 : 핑크;"> .small-6 </ DIV>
</ DIV>
</ DIV>
»시도