[vuetify]grid

 

https://vuetifyjs.com/en/components/grids/#align

row 에 col 포함

Vuetify의 컴포넌트에서 cols="12"와 md="4" 속성은 반응형 레이아웃을 정의하는 데 사용됩니다. Vuetify는 Material Design의 그리드 시스템을 기반으로 하고 있으며, 다양한 화면 크기에서 그리드의 동작을 제어할 수 있도록 다양한 속성을 제공합니다.

cols="12"

• 의미: 이 속성은 해당 열이 그리드의 전체 너비(12칸)를 차지하도록 합니다. Vuetify의 그리드 시스템은 12개의 열로 구성되어 있기 때문에 cols="12"는 해당 열이 한 행 전체를 차지한다는 의미입니다.
• 사용 시점: 주로 모바일 디바이스와 같은 작은 화면에서 열이 한 줄 전체를 차지하도록 설정할 때 사용됩니다.

md="4"

• 의미: 이 속성은 중간 크기(md) 이상의 화면에서 해당 열이 그리드의 4칸을 차지하도록 설정합니다. md는 Vuetify의 반응형 그리드 시스템에서 'medium' 크기의 디바이스를 의미하며, 보통 태블릿이나 작은 데스크톱 화면을 나타냅니다.
• 사용 시점: 중간 크기 이상의 화면에서는 하나의 행에 3개의 열(4칸씩 3개 = 12칸)이 배치되도록 설정할 때 사용됩니다.