npm install @vue/cli -g

 

vue create vuetify-layout

 

cd vuetify-layout

 

vue add vuetify

 

code .

 

npm run serve

 

웹브라우저에서 localhost:8080으로 접속..

 

먼저 https://vuetifyjs.com/en-US/framework/grid#unique-layouts 의 내용을

 

vscode로 카피해서 동작시켜 보죠..

 

에서

fluid : 디폴트가 Center focused Page인데.  fluid로 하면 Full width로 변경되네요

         즉 화면에 따라 margin 폭이 추가 됩니다.

아래 사진은 1600x900에 fluid x인 경우

fluid인 경우

 

grid-list-sm: v-container의 옵션으로 grid-list-{xs 에서 xl}  각 그리드 사이의 gap을 설정 합니다. (2px - 24px까지) <=매뉴얼은 이런데 xs: 1px, sm: 2px,  md: 4px, lg: 8px, xl: 12px 의 패딩에 gap은 양쪽에서 2배로 그래서 끝쪽은 -로 해서 보전을 해 줍니다.

 

v-container의 기본 패딩이 24입니다. (pa-4)

이 부분도 없애려고 하면 pa-0 으로

 

pa-0: 0px, 1: 4px, 2: 8px, 3: 16px, 4: 24px, 5: 48px   참조: 여기

 

각 Component의 Props는 https://vuetifyjs.com/en/components/api-explorer 에서 찾아 볼수 있지만,

v-container, v-layout, v-flex는 https://vuetifyjs.com/en/framework/grid#grid-system

 

 

row : 배치를 row(가로방향), column(세로방향)

wrap : none, wrap (wrap-reverse는 지원 안됨)