Vuetify Grid System

Grid System?

- 12Point Grid System

- 내용물들의 레이아웃 설정을 위해 flex-box를 사용하여 구현됨.

- 특정 스크린 사이즈나 배치에 따라 5가지 유형의 미디어 BreackPoint가 포함되어 있음. (Bootstrap4의 GridSystem Options 참고)

 

Bootstrap4 Grid Options

 

 

Usage

1) v-container는 fluid 속성으로 full 너비로 확장하여 중앙에 focus된 페이지로 사용할 수 있음.

 

2) v-layout은 v-flex를 사용하여 구별된 섹션으로 사용된다.

따라서 다음과 같은 구조로 사용됨 : v-container >> v-layout >> v-flex

v-flex는 자동으로 자식들을 flex : 1 1 auto로 설정된다.

 

3) property를 자동으로 class로 변경하기 때문에 property로 값을 주면 됨.

 

4) v-spacer : component들 사이에 공백을 주고 싶을 때 사용하는 component

 

Property

1) v-layout

 

 

 

Vuetify Docs : https://vuetifyjs.com/en/framework/grid

Bootstrap Docs : https://getbootstrap.com/docs/4.3/utilities/display/#notation

Bootstrap4 GridSystem: https://medium.freecodecamp.org/learn-the-bootstrap-4-grid-system-in-10-minutes-e83bfae115da