Grid System이란?
- 12Point Grid System
- 내용물들의 레이아웃 설정을 위해 flex-box를 사용하여 구현됨.
- 특정 스크린 사이즈나 배치에 따라 5가지 유형의 미디어 BreackPoint가 포함되어 있음.
Usage
-v-container는 fluid 속성으로 full 너비로 확장하여 중앙에 focus된 페이지로 사용할 수 있음.
-v-layout은 v-flex를 사용하여 구별된 섹션으로 사용된다.
따라서 다음과 같은 구조로 사용됨 : v-container >> v-layout >> v-flex
v-flex는 자동으로 자식들을 flex : 1 1 auto로 설정된다.
-property를 자동으로 class로 변경하기 때문에 property로 값을 주면 됨.
-v-spacer : component들 사이에 공백을 주고 싶을 때 사용하는 component
Property - 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
'framework(Vue_Nuxt)' 카테고리의 다른 글
infinite scroll(무한 스크롤)만들기 (0) | 2019.12.17 |
---|---|
routing middleware(Vue) (0) | 2019.12.16 |
vuex component, mutation&action 실습 followlist예제 (0) | 2019.12.12 |
Vuex란? (0) | 2019.12.10 |
Vue.js 화면 구성하기, 기본 문법 (0) | 2019.12.09 |