Я пытаюсь создать макет сетки, но у меня возникают проблемы.
Макет, который я пытаюсь создать, прикреплен к изображению ниже. Проще показать, чем объяснить.
Используя систему компоновки сетки vuetify, я пытался получить ее, но не могу заставить ее красиво заполнить все пространство. Мой код ниже.
Есть ли хороший способ создать этот макет сетки?
<v-container fluid grid-list-md box>
<v-layout row>
<v-flex d-flex xs3>
<v-layout row wrap>
<v-card color = "orange lighten-2" tile flat>
<v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
</v-card>
<v-divider></v-divider>
<v-card color = "orange lighten-2" tile flat>
<v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
</v-card>
<v-divider></v-divider>
<v-card color = "orange lighten-2" tile flat>
<v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
</v-card>
<v-divider></v-divider>
<v-card color = "orange lighten-2" tile flat>
<v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
</v-card>
</v-layout>
</v-flex>
<v-flex d-flex xs9>
<v-layout row wrap>
<v-layout row>
<v-flex d-flex>
<v-card color = "blue-grey" dark tile flat>
<v-card-text>{{ lorem }}</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex>
<v-card color = "blue-grey" dark tile flat>
<v-card-text>{{ lorem }}</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row>
<v-flex d-flex xs9>
<v-card color = "blue-grey" dark tile flat>
<v-card-text>{{ lorem }}</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-layout>
</v-flex>
</v-layout>
</v-container>





Вы можете достичь этого формата, используя свойство fill-height и точки останова. Наличие <v-layout row wrap> заставит большую коробку с xs12 занять всю следующую строку, поэтому вам не нужно создавать свой собственный макет.
<v-layout row wrap>
<v-flex d-flex xs6>
<v-card color = "blue-grey" dark tile flat>
<v-card-text>{{ lorem }}</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex xs6>
<v-card color = "blue-grey" dark tile flat>
<v-card-text>{{ lorem + lorem }}</v-card-text>
</v-card>
</v-flex>
<v-flex fill-height d-flex xs12>
<v-card color = "blue-grey" dark tile flat>
<v-card-text>{{ lorem + lorem + lorem}}</v-card-text>
</v-card>
</v-flex>
</v-layout>
Вот кодовый ключ, который показывает это в действии.
Почему вы указываете атрибут d-flex на компоненте <v-flex>? Разве это не избыточно?
Требуется для вложенных сеток. См. vuetifyjs.com/en/framework/grid#nested-grid
Похоже, что с последний Vuetify (v2) все изменилось. Никакого упоминания о d-flex.
Почему это отклонено?