Блог

У меня есть панель мониторинга, которая содержит плитки в 3 строки, каждая строка содержит 5 плиток. Как на картинке ниже

Я использую приведенный ниже код для плиток:

 <v-layout row wrap>
  <v-flex xs12 sm8 md4 lg4 xl4 class="lg5-custom pl-0 pb-0 tiles-cursor">
    <v-card flat tile class="d-flex">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-flex>
  <v-flex xs12 sm8 md4 lg4 xl4 class="lg5-custom pl-0 pb-0 tiles-cursor">
    <v-card flat tile class="d-flex">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-flex>
  ... so on
</v-layout>
  

Ниже приведен мой CSS-код для настройки плиток:

 @media (min-width: 1264px) and (max-width: 1903px) {
    .flex.lg5-custom {
        width: 20%;
        max-width: 20%;
        flex-basis: 20%;
    }
    .flex.lg10-custom {
      width: 40%;
      max-width: 40%;
      flex-basis: 40%;
    }
}
  

Даже маленький экран иногда не поддерживает последние плитки 3-го ряда.

.flex.lg10-custom CSS используется для 3-й строки последней плитки.

Я хотел поддерживать эту целевую страницу для всего экрана (особенно для большого экрана). Есть идеи?

Итак, я решил это, используя v-row и v-col вместо v-flex . Однако все плитки стали маленькими по сравнению с предыдущей, потому что весь размер строки 12 равен, и я разделил на 5 так, что я могу использовать только only 10 , not 12 . Мне пришлось уйти 1 слева и 1 справа, чтобы сделать это center . Ниже приведен мой код:

 <v-container fluid>
  <v-row justify="center">
    <v-col cols="2" class="pb-1 pt-1 pl-1 pr-1">
      <v-card elevation="23" class="secondary ml-0 mr-0 mt-0 mb-0 change-mouse-pointer">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-col>
  <v-col cols="2" class="pb-1 pt-1 pl-1 pr-1">
      <v-card elevation="23" class="secondary ml-0 mr-0 mt-0 mb-0 change-mouse-pointer">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-col>
  ... so on
 </v-row>
.... last row last col
<v-row justify="center">
... first 3 will be the same as before

  <v-col cols="4" class="pb-1 pt-1 pl-1 pr-1">
      <v-card elevation="23" class="secondary d-flex" height="50%">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-col>
 </v-row>
</v-container>
  

Если кто-то хочет получить полное решение, пожалуйста, прокомментируйте ниже.