Как я могу сделать свои элементы сетки рядом друг с другом?

Question

Я пытаюсь сделать простое представление управления проектами, используя vuejs и vuetify. Стиль сетки vuejs имеет представление, которое я хочу использовать, но я не могу расположить различные объекты рядом друг с другом, как в «Необходимость», «Начало», «Готово». Это код, и он выглядит так, как я хочу, но не в правильном порядке. Может ли кто-нибудь еще указать мне, как сделать уникальные контейнеры, чтобы я мог добавить конкретную информацию в каждый из столбцов

    <template>

<div class="projects">

<!-- Need to do container -->
<v-container fluid grid-list-md text-xs-center>
  <v-layout column>
    <v-flex xs6 order-lg2>
      <v-card dark color="blue">
        <v-card-text class="px-0">Need to Do</v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>

  <!-- Started Container -->
    <v-container fluid grid-list-md text-xs-center>
      <v-layout column>
       <v-flex>
         <v-card dark color="green">
           <v-card-text class="px-0">Started</v-card-text>
         </v-card>
       </v-flex>
     </v-layout>
   </v-container>

  <!-- Done Container -->
   <v-container fluid grid-list-md text-xs-center>
     <v-layout column>
    <v-flex>
      <span>
      <v-card dark color="purple">
        <v-card-text class="px-0">Done</v-card-text>
      </v-card>
      </span>
    </v-flex>
        </v-layout>
      </v-container>
    </div>

    </template>


    <script>
    export default {

   }
< /script>

Answer 1

Вы можете обернуть три <v-container> с <v-layout row>, что сделает столбцы горизонтально смежными.Чтобы переместить элементы столбца наверх, замените <v-container fluid> на <v-container fill-height>.

new Vue({
  el: '#app',
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.css">

<div id="app">
  <v-app>
    <v-layout align-start row fill-height>
      <!-- Need to do container -->
      <v-container fill-height grid-list-md text-xs-center>
        <v-layout column>
          <v-flex xs6 order-lg2>
            <v-card dark color="blue">
              <v-card-text class="px-0">Need to Do</v-card-text>
            </v-card>

            <v-card>
              <v-card-text>Clean garage</v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>

      <!-- Started Container -->
      <v-container fill-height grid-list-md text-xs-center>
        <v-layout column>
          <v-flex>
            <v-card dark color="green">
              <v-card-text class="px-0">Started</v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>

      <!-- Done Container -->
      <v-container fill-height grid-list-md text-xs-center>
        <v-layout column>
          <v-flex>
            <span>
              <v-card dark color="purple">
                <v-card-text class="px-0">Done</v-card-text>
              </v-card>
            </span>
          </v-flex>
        </v-layout>
      </v-container>
    </v-layout>
  </v-app>
</div>

Answer 2

Вы, вероятно, хотите, это предполагает, что вы просто хотите, чтобы существующие контейнеры были в строке

<v-container>
  <v-layout row wrap>
    <!-- Need to do container -->
    <!-- Started Container -->
    <!-- Done Container -->
  </v-layout>
</v-container>