CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2
user7887481
user7887481

Reputation: 69

How can I make my grid items next to each other?

I am trying to make a simple project management view using vue.js and vuetify. The grid style of vue.js has a view I want to use but I cannot get the different objects to be next to each other at the top as in "Need to do", "Started" and "Done". This is the code and it looks how I want just not in the right order. Can someone also point me in the direction of how I would go about making it unique containers so I can add specific info to each of the columns

    <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>

Upvotes: 2

Views: 4596

Answers (2)

tony19
tony19

Reputation: 138706

You can wrap the three <v-container>s with a <v-layout row>, which would make the columns horizontally adjacent. To move the column's items to the top, replace <v-container fluid> with <v-container fill-height>.

new Vue({
  el: '#app',
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Upvotes: 1

Samantha
Samantha

Reputation: 849

You probably want, this is assuming you just want the existing containers you have to be in a row

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

Upvotes: 3

Related Questions