Managing rows in the Vuetify grid system

I am currently working on rearranging the layout of rows in specific columns. My goal is illustrated in the attached image - I want the red card item to span across the row it is placed in, but I am unsure how to achieve this. Additionally, I would like the blue card item to shift to the bottom instead of leaving empty space as shown in the picture. https://i.sstatic.net/FtSGo.jpg Here is the code:

Codepen

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
  })
})
<div id="app">
    <v-app id="inspire">
        <v-container fluid>
            <v-row>
                <v-col cols="4" class="d-flex child-flex">
                    <v-card color="orange lighten-2" tile flat>
                        <v-card-text>Card 1</v-card-text>
                    </v-card>
                </v-col>
                <!--         triple colum here-->

                <v-row class="flex-column">

                    <v-col class="d-flex child-flex">
                        <v-card color="indigo lighten-2" dark tile flat>
                            <v-card-text>Card 3 Extended To fit</v-card-text>
                        </v-card>
                    </v-col>

                    <v-col class="d-flex child-flex">
                        <v-card color="indigo lighten-2" dark tile flat>
                            <v-card-text>Card 3 Extended To fit</v-card-text>
                        </v-card>
                    </v-col>

                    <v-col class="d-flex child-flex">
                        <v-card color="indigo lighten-2" dark tile flat>
                            <v-card-text>Card 3 Extended To fit</v-card-text>
                        </v-card>
                    </v-col>
                    <!--        next col -->
                </v-row>

                <v-col cols="4">
                    <v-card color="red lighten-2" dark tile flat>
                        <v-card-text>
                          {{ lorem }} {{ lorem }} 
                          {{ lorem }}{{ lorem }} 
                          {{ lorem }} {{ lorem }}
                      </v-card-text>
                    </v-card>
                </v-col>

                <!--         bottom row -->
                <v-col cols="4" class="d-flex child-flex">
                    <v-card color="purple lighten-1" tile flat>
                        <v-card-text>{{lorem}}</v-card-text>
                    </v-card>
                </v-col>

                <v-col cols="4" class="d-flex child-flex">
                    <v-card color="green lighten-2" tile flat>
                        <v-card-text>{{lorem}}</v-card-text>
                    </v-card>
                </v-col>

                <v-col cols="4">
                    <v-card color="blue lighten-2" tile flat>
                        <v-card-text>{{lorem}} {{lorem}}</v-card-text>
                    </v-card>
                </v-col>

            </v-row>
        </v-container>
    </v-app>
</div>

javascriptvue.jsvuetify.js

Answer №1

After spending some time rearranging the Vuetify elements <v-col> and <v-row>, attempting to isolate the third column to resize the blue section and expand the red one, I encountered a few issues.

Although my initial approach almost worked, it led to unexpected behaviors like the indigo colors not spanning their entire column and row gutters disappearing. It seems that there is a peculiar interaction between the fluid layout and the <v-row> & <v-col> components.

Furthermore, the spacing between elements behaved oddly when adjusting the page width.

Switching gears to using CSS grid yielded much better results – simpler and more straightforward to adjust as needed.

This approach also offered smoothly responsive behavior when resizing the page.

Codepen

HTML

The key difference here was abandoning the use of <v-row> or <v-col> elements in favor of placing only the content you wish to display on the page. By employing CSS grid, elements will automatically arrange themselves within the container according to your specifications.

<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

Using CSS grid areas allowed me to set up a grid with specific rows and columns, then assign elements based on unique classes to position them accordingly.

For more complex layouts, additional rows or columns can be added, and elements distributed across them by updating the grid-template-areas property which defines the matrix.

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

Answer №2

Hope this information proves useful.

https://example.com/Derek_Robertson/pen/NWPmwMK

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>

      <v-layout row wrap>
        <v-flex d-flex xs12 sm4 child-flex>

            <v-layout row wrap>
      <!-- Starting upper section here -->
              <v-flex d-flex xs12 sm12 child-flex>
                <v-card color="orange lighten-2" tile flat>
                  <v-card-text>Card 1</v-card-text>
                </v-card>
              </v-flex>

              <v-flex d-flex xs12 sm12 child-flex>
                <v-card color="purple lighten-1" tile flat>
                  <v-card-text>{{lorem}}</v-card-text>
                </v-card>
              </v-flex>

          </v-layout>
        </v-flex>

        <v-flex d-flex xs12 sm2 child-flex>

            <v-layout row wrap>
      <!-- Starting upper section here -->
              <v-flex d-flex xs12 sm12>
                <!-- Wrapping to a new row instead of staying in one row to match the size of the columns next to each other -->
                <v-layout row wrap>
                  <v-flex d-flex>
                    <v-card color="indigo lighten-2" dark tile flat>
                      <v-card-text>Card 2 Extended To fit</v-card-text>
                    </v-card>
                  </v-flex>
                   <v-flex d-flex>
                    <v-card color="indigo lighten-2" dark tile flat>
                      <v-card-text>Card 3 Extended To fit</v-card-text>
                    </v-card>
                  </v-flex>
                   <v-flex d-flex>
                    <v-card color="indigo lighten-2" dark tile flat>
                      <v-card-text>Card 4 Extended To fit</v-card-text>
                    </v-card>
                  </v-flex>

                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 child-flex>
                <v-card color="green lighten-2" tile flat>
                  <v-card-text>{{lorem}}</v-card-text>
                </v-card>
              </v-flex>

          </v-layout>
        </v-flex>

        <v-flex d-flex xs12 sm6 child-flex>

            <v-layout row wrap>
      <!-- Starting upper section here -->
              <v-flex d-flex xs12 sm12 style="min-height:156px;" >
                <v-card color="red lighten-2" dark tile flat>
                  <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
                </v-card>
              </v-flex>

              <v-flex xs12 sm12 child-flex>
                <v-card color="blue lighten-2" tile flat>
                  <v-card-text>{{lorem}} {{lorem}}</v-card-text>
                </v-card>
              </v-flex>

          </v-layout>
        </v-flex>
       </v-layout>
    </v-container>
  </v-app>
</div>

Answer №3

To make it work, simply include the d-flex class in your tag. See image for proof

Your final code snippet should look similar to this.

<v-flex d-flex xs12 sm6 child-flex>
          <v-card color="blue lighten-2" tile flat>
            <v-card-text>{{lorem}} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Handling Errors in Asynchronous Functions with JavaScriptLet's explore the best practices for

I am a beginner in javascript and recently delved into async/await. After going through various resources, I gained a basic understanding. However, while experimenting with some code examples, I encountered unexpected results which left me puzzled about wh ...

javascriptasynchronousasync-await

Using async and await functions in Vuex

Curious about the usage of async/await actions in Vuex, I referenced the documentation for guidance. The provided syntax example is as follows: actions: { async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ...

vue.jsasync-awaitvuex

Mobile Devices Image Gallery Optimization

Just starting out with HTML, CSS, Bootstrap, and JavaScript and I've put together this gallery. It looks good, but I need to optimize it for mobile devices and smaller screens. Any suggestions on what I should change? For items #myImg4, #myImg5, #myI ...

javascripthtmlcssbootstrap-4

Is there a way for me to include .js or .cpp prior to using the Vim shortcut key gf?

When using a programming language like nodejs, the require function does not require the addition of the .js extension. For example: var Assert = require('./app_base'); However, in vim, when using gf, it cannot find app_base without the .js ext ...

javascriptnode.jsvim

What is the best way to update a div element following a successful AJAX request?

Sharing my experience as I struggled to find a raw JavaScript solution among all the jQuery answers. I have a function that posts comments to a section, and I want the section to refresh after posting. However, my code seems to be failing to work as expec ...

javascripthtmlajax

Binding textarea data in Angular is a powerful feature that allows

I am looking to display the content from a textarea on the page in real time, but I am struggling to get the line breaks to show up. Here is my current code snippet: app.component.html <div class="ui center aligned grid">{{Form.value.address}}< ...

javascripthtmlangularangular2-databinding

In MongoDB, learn the process of efficiently updating nested objects in a dynamic manner

We have a variety of nested configurations stored in MongoDB. Initially, we store the following object in MongoDB: const value = { 'a': { 'b': 1 } } collection.insertOne({userId, value}) Now, I would like to modify the object in ...

javascriptmongodbmongodb-query

Tips for matching the height of a child div to its parent's height:

Is there a way to ensure that the height of the child div matches the height of the parent div without explicitly setting it in the CSS? Even when the parent div has a height of 300px, the child divs car1front and card1back do not seem to adjust accordingl ...

javascripthtmlcss

Lodash will return a false value when checking an empty object

I am working with the object req.user.stripe, which currently has a value of an empty object {}. I want to determine whether this object is empty or not by using the lodash function isEmpty(). However, when I use console.log(_.isEmpty(req.user.stripe)), it ...

javascriptnode.jslodashjavascript-objects

Conceal the <p> tag if the content inside is either "0" or blank

I'm currently working on a basic calculator project and I've hit a roadblock. I need to hide certain elements based on conditions. The code snippet with explanations is provided below. function calculateArea() { var length = document.getElem ...

javascript

JavaScript for rotating an element upon button click

My webpage design <div id="yabanner"> <img src="img/ok.jpg"> </div> <button>Click Me</button> <button>Click Me</button> <button>Click Me</button> My script code var button = document.getElementsBy ...

javascripthtmldom

The i18n feature in Nuxt 3 retrieves language locales from an external API

While working on my Nuxt 3 app, I encountered an issue when trying to integrate i18n. Despite conducting extensive research, I couldn't find any helpful information, hence I have a question. I am utilizing i18n with Prismic CMS. The locales array is s ...

javascriptvue.jsnuxt.jsinternationalizationvue-i18n

After a brief period of running, my AJAX request begins to malfunction

I'm attempting to automatically update two sections of my webpage every 4 seconds. Currently, my AJAX setup looks like this: setInterval(function () { autoUpdate() }, 4000); function autoUpdate() { $.get('/hello&a ...

javascriptjqueryajaxmongodbhandlebars.js

Converting units to rem dynamically in CSS: a comprehensive guide

Hey there, I'm currently trying to dynamically convert units into rem in CSS and facing some issues. I have set the root font-size as 23px The current font-size is 16px The expected result should be 16 / 23 => 0.695rem Question: I am looking for ...

javascriptjquerycss

Material-UI: Issue with AppBar background color not changing when specifying type as 'dark' in createMuiTheme

When I change the theme by switching the value of theme.palette.type to 'dark', I noticed that all white components switch to a dark color, but not for components like AppBar which have a primary color of #3f51b5 as their default. I assumed that ...

javascriptreactjsthemesmaterial-ui

Error: The variable 'error' could not be located

Below is the code that I am using: $(document).ready(function(){ var callPage = function(){ $.post('/pageToCall.php'); }; setInterval('callPage()', 60000); }); However, I encountered an error stating ReferenceErro ...

javascriptjquery

Detecting User Interaction with Email Link

On my webpage, there is a link that when clicked, opens the default Email client. I also want to track in my database if the user has clicked on this link or not. Since this interaction occurs at the client-side, I am wondering if there is a way to check ...

javascripthtmlajaxanchormailto

Leveraging Parameters from URL in Javascript

I'm facing an issue with my area shape, the href="/kosmetikstudios/deutschland/Bayern" tag seems to be causing a problem. I want to utilize the parameter "Bayern" (which is the last parameter in the URL). I need this to be dynamic. Below is my JavaS ...

javascripturlparametersarea

Struggling with Sequelize's refusal to add new records to the database

In my backend server, there is a function defined as follows: async create(data) { try { console.log("User ", data); const newUser = await models.User.create({ ...data, password: await bcrypt.hash(`${data.password} ...

javascriptnode.jsexpresssequelize.jsbackend

There was an error because the variable "items" has not been defined

Having some trouble with an AngularJS service where I am attempting to add an item to an array every 5 seconds. However, I keep encountering the error 'items is not defined' after the first dynamic addition... I've been tinkering with this ...

javascriptangularjs