javascript Vuetify网格系统行管理

Richard Matsen 2020-02-05 20:28

我花了很多时间重新排列Vuetify <v-col>和<v-row>，基本上是想将第三列单独分离出来，以便可以缩小蓝色，可以增加红色。

它几乎起作用了，但是其他一些功能却丢失了（例如靛蓝跨越了整个列，行槽消失了）。流体（蛇行）布局和<v-row>＆<v-col>机制之间似乎存在一些怪异的相互作用。

此外，更改页面宽度时，装订线有令人不安的闪烁感。

相反，通过切换到CSS网格，我得到了一个相当完美的结果-更简单，更容易调整。

更改页面宽度时，它的响应也很流畅。

码笔

的HTML

首先要注意的是，否<v-row>或<v-col>元素，只是要显示的内容。您可以按任何顺序（在容器内部）将它们放置在页面上，CSS网格负责放置。

<div id="app">
  <v-app id="inspire">
    <v-container fluid class="myGrid">
      <v-card class="orange" color="orange lighten-2" tile flat>
        <v-card-text>Card 1</v-card-text>
      </v-card>
      <v-card class="indigo1" color="indigo lighten-2" dark tile flat>
        <v-card-text>Card 3 Extended To fit</v-card-text>
      </v-card>
      <v-card class="indigo2" color="indigo lighten-2" dark tile flat>
        <v-card-text>Card 3 Extended To fit</v-card-text>
      </v-card>
      <v-card class="indigo3" color="indigo lighten-2" dark tile flat>
        <v-card-text>Card 3 Extended To fit</v-card-text>
      </v-card>
      <v-card class="red" color="red lighten-2" dark tile flat>
        <v-card-text>
          {{ lorem }} {{ lorem }} 
          {{ lorem }}{{ lorem }} 
          {{ lorem }} {{ lorem }}
        </v-card-text>
      </v-card>
      <v-card class="purple" color="purple lighten-1" tile flat>
        <v-card-text>{{lorem}} {{lorem}}</v-card-text>
      </v-card>
      <v-card class="green" color="green lighten-2" tile flat>
        <v-card-text>{{lorem}} {{lorem}}</v-card-text>
      </v-card>
      <v-card class="blue" color="blue lighten-2" tile flat>
        <v-card-text>{{lorem}}</v-card-text>
      </v-card>
    </v-container>
  </v-app>
</div>

的CSS

CSS网格区域允许您定义行和列的网格，然后（通过唯一类）将元素分配给矩阵。

当您获得更多棘手的需求时，只需添加更多的行或列，并在其上散布元素（请参见grid-template-areas，附加到该属性的字符串代表矩阵）。

.myGrid {
  display: grid;
  grid-template-columns: auto auto auto;         // 3 even self-sizing cols
  grid-template-rows: repeat(3, 1fr) auto auto;  // 5 rows, first 3 expand & last 2 shrink
  grid-template-areas: 
    "orange indigo1 red"
    "orange indigo2 red"
    "orange indigo3 red"
    "purple green red"
    "purple green blue"
    ;
  grid-gap: 0.5rem;
}
.orange { grid-area: orange }
.indigo1 { grid-area: indigo1 }
.indigo2 { grid-area: indigo2 }
.indigo3 { grid-area: indigo3 }
.red { grid-area: red }
.green { grid-area: green }
.purple { grid-area: purple }
.blue { grid-area: blue }

javascript - Vuetify网格系统行管理

热门帖子

相关问题

热门github