Vuetify 프로젝트 목록의 적응형 그리드 레이아웃

Question

흔해 보이는 문제에 부딪혔지만 극복할 수 있어요.

객체 목록을 반환하는 API 쿼리가 있습니다.

내 페이지를 콘텐츠로 가득 찬 카드 그리드로 표시하고 싶습니다.

그리드에 5개의 열이 있고 행 수가 목록의 요소 수에 맞춰 조정되기를 원합니다.

구현 방법을 알 수 있어요.

예:

를 반환하는 쿼리가 있습니다. 으아악

내 그리드는 체계적으로 5개의 열과 적응형 행으로 구성된 7개의 요소로 구성됩니다. 예를 들면 다음과 같습니다.

내 쿼리가 예를 들어 14개 요소를 반환하는 경우 레이아웃은 다음과 같이 조정되어야 합니다.

내가 얻을 수 있는 가장 가까운 코드는 다음과 같습니다.

으아악

도와주셔서 감사합니다

Answer 1

v-row 和 v-col 문을 다음과 같이 변경하는 경우:

으아아아

그리고 CSS 그리드 레이아웃<创建 CSS 类 5열/a>:

을 사용하세요. 으아아아

예CodePen