그리드 시스템 (Grid system)

Vuetify 12 포인트 그리드 시스템을 사용합니다. flex-box를 사용하는 이 그리드는 어플리케이션 컨텐츠의 레이아웃에 사용됩니다. 여기엔 여러 화면 크기와 방향에 대응하는 5가지 타입의 미디어 브레이크포인트가 있습니다. 그리드 컴포넌트의 prop들은 사실 정의된 속성에 따라 파생되는 (css) 클래스들입니다. 이를 이용해 이들 (css) 헬퍼 클래스들을 prop 형태로 쉽게 사용할 수 있습니다. 물론 이 클래스들은 여전히 어디든지 사용할 수 있습니다.

사용법

v-container 중앙 집중형 페이지(center focused page)에 사용될 수 있습니다. 또는 fluid prop으로 전체 너비로 확장할 수 있습니다. v-layout은 섹션을 분리하기 위해 사용하며 v-flex를 포함합니다. 레이아웃의 구조는 다음과 같습니다. v-container » v-layout » v-flex. 그리드 체인의 각 부분은 flex-box 요소입니다. 마지막의 v-flex는 자동으로 자식 요소들을 flex: 1 1 auto로 설정합니다.


API

v-container
이름
align-baseline
디폴트
false
타입
Boolean

항목을 베이스라인(baseline)으로 정렬

이름
align-center
디폴트
false
타입
Boolean

항목들을 중앙으로 정렬

이름
align-content-center
디폴트
false
타입
Boolean

컨텐츠를 중앙으로 정렬

이름
align-content-end
디폴트
false
타입
Boolean

컨텐츠를 끝 쪽으로 정렬

이름
align-content-space-around
디폴트
false
타입
Boolean

컨텐츠를 좌우정렬(Align content to the space around).

이름
align-content-space-between
디폴트
false
타입
Boolean

Align content to the space between.

이름
align-content-start
디폴트
false
타입
Boolean

컨텐츠를 앞 쪽으로 정렬

이름
align-end
디폴트
false
타입
Boolean

항목들을 끝 쪽으로 정렬

이름
align-start
디폴트
false
타입
Boolean

항목들을 앞쪽으로 정렬

이름
d-{type}
디폴트
false
타입
Boolean

display 항목을 flex/inline-flex/block 등으로 설정. 형식)d-{타입}. 예)d-flex.

이름
fill-height
디폴트
false
타입
Boolean

Make sure that col element height is filled with parent and child. 자식이 column 요소일 경우, 사파리/파이어폭스 에서 중요함

이름
fluid
디폴트
false
타입
Boolean

Removes viewport size breakpoints

이름
grid-list-{xs through xl}
디폴트
false
타입
Boolean

Sets the gutter between grid list items ranging from 2px to 24px

이름
id
디폴트
undefined
타입
string

컴포넌트의 DOM 아이디를 설정

이름
justify-center
디폴트
false
타입
Boolean

Justify content to the center.

이름
justify-end
디폴트
false
타입
Boolean

Justify content to the end.

이름
justify-space-around
디폴트
false
타입
Boolean

Justify content to the space around.

이름
justify-space-between
디폴트
false
타입
Boolean

Justify content to the space between.

이름
justify-start
디폴트
false
타입
Boolean

Justify content to the start.

이름
tag
디폴트
div
타입
String

컴포넌트 태그를 커스텀 태그로

예제

Layout playground

Test the layout props in a simple playground.


오프셋 (Offset)

오프셋은 아직 보이지 않는 요소를 보완하거나 컨텐츠의 위치를 제어하는데 유용합니다. 중단점(Breakpoint) 처럼, 여러 크기에 대응하여 오프셋을 정할 수 있습니다. 이를 통해 필요에 따라 레이아웃을 정확하게 미세 조정할 수 있습니다.


순서 (Order)

그리드 항목의 순서를 제어할 수 있습니다. 오프셋처럼 다양한 화면크기에 대응하는 순서를 지정할 수 있습니다. 어떤 어플리케이션에도 적합한 특수화된 스크린 레이아웃을 디자인 하세요.


방향과 정렬 (Direction and Align)

방향과 정렬을 다양한 방법으로 지정합니다. 가능한 모든 flex-box api 는 직관적인 헬퍼 prop을 통해 가능합니다.


행과 열 중단점 (Row and column breakpoints)

해상도에 따라 동적으로 레이아웃을 변경하세요. (화면 크기를 바꾸면서 작은 중단 점에서 레이아웃이 "하나의 `행"으로 바뀌는 것을 관찰해보세요)


중첩 그리드 (Nested grid)

다른 프레임워크들 처럼 다양한 커스텀 레이아웃을 구현하기 위해 그리드는 중첩될 수 있습니다.


유니크한 레이아웃 (Unique layouts)

Vuetify 그리드 시스템의 강력함과 유연함과 함께 놀라운 사용자 인터페이스를 만들 수 있습니다.


v-spacer

v-spacer 컴포넌트는 가능한 공간을 체우거나 두 컴포넌트 사이에 공간을 만들고 싶을때 유용합니다.


HTML 태그 (Html tags)

때로 레이아웃 항목에 section 이나 li 같은 특정 태그를 사용하고 싶을 경우