Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested grid: breakpoints not working?

See original GitHub issue

Steps to reproduce

Resize your browser

Versions

Vue 2.2.6
Vuetify 0.12.2
Windows 10 x64
Chrome 58

What is expected ?

The old behavior (pre 0.12) which I think is the correct one, is that the cards under the j loop should take all the width of the parent when reaching the XS breakpoint.

What is actually happening ?

It does not take all the width.

Reproduction Link

https://jsfiddle.net/8Lt1es7r/

Issue Analytics

State:
Created 6 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

7reactions

marvinrogercommented, May 30, 2017

Actually, only wrap is needed in the inner v-layout. This makes sense: if the content overflows, we allow it to wrap. It it self-explaining.

However, still, I don’t get why column-[size] and row-[size] are necessary. I mean, if you want to make 3 columns on md and 3 lines on xs you only need to xs12 and md4… Right?

4reactions

marvinrogercommented, May 29, 2017

Maybe the docs could clarify how the column-md, row-md, etc. works?

Top Results From Across the Web

Nested grids with breakpoints - Stack Overflow

My problem is the $column-width: 200px; for the inner grid, as the generated media query uses min-widht: 600px, although at this point there...

Grid system · Bootstrap v5.0

Our grid supports six responsive breakpoints. Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it...

How the Bootstrap Grid Really Works | by Carol Skelly - Medium

Bootstrap allows us to nest row and col-* inside other col-* which enables more control over when columns stack vertically at specific breakpoints....

XY Grid | Foundation for Sites 6 Docs

A fully reworked new grid system in v6.4 which has all the variety ... @include xy-grid-frame($vertical, $nested, $gutters, $breakpoint, $include-base);.

CSS » Grid system | m.css

If you have never heard of it, it all boils down to a few breakpoints that ... a fixed width, it's not desirable...