Сделать столбцы одинаковой высоты в Vuetify Grid System - PullRequest
Новая
       31

Сделать столбцы одинаковой высоты в Vuetify Grid System

0 голосов
/ 18 февраля 2020

Я сейчас создаю grid-макет в Vuetify, но я застрял. Я делаю макет карты с изображениями. Вот пример:

enter image description here

Я пробовал это со следующим кодом, но тогда маленькие карточки справа не выравниваются из-за полей . 

    <v-container>
      <v-row class="justify-center">
        <v-col cols="6">
          <v-hover v-slot:default="{ hover }">
            <v-card
              to="/pools"
              :elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover , 'overwrite-hover' : $vuetify.breakpoint.xsOnly}"
            >
              <v-img class="white--text" :src="images[0]">
                <v-card-title class="white--text align-end fill-height headline">My Pools</v-card-title>
                <template v-slot:placeholder>
                  <v-row class="fill-height" align="center" justify="center">
                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                  </v-row>
                </template>
              </v-img>
            </v-card>
          </v-hover>
        </v-col>
        <v-col cols="2">
          <v-card class="ma-2" light height="50%"></v-card>
          <v-card class="ma-2" light height="50%"></v-card>
        </v-col>
      </v-row>
      <v-row class="justify-center">
        <v-col cols="8">
          <v-card light height="120px"></v-card>
        </v-col>
      </v-row>
   </v-container>

У кого-нибудь есть предложения или, может быть, подобный пример?

Заранее спасибо!

1 Ответ

1 голос
/ 21 февраля 2020

К счастью, вам нужно лишь внести небольшие изменения в карты меньшего размера справа. Используйте flex и позвольте flex сделать его волшебный c :) По сути, это говорит о том, что карты должны расти до максимальной доступной высоты без отсечения. Затем добавьте поле между карточками с классами помощников mb и mt. 

<v-col cols="2" class="d-flex" style="flex-direction:column">
  <v-card class="mb-1 flex-grow-1">
    Upper card
  </v-card>
  <v-card class="mt-1 flex-grow-1">
    Lower card
  </v-card>
</v-col>

в виде коды и коробки . Проверьте файл "layout. vue" для полного примера.

...