5

In the Flexboxgrid framework I see a margin of -1rem on the .row class. In small viewports this creates a small horizontal scroll of the container.

Since I've seen this negative margin on other frameworks, what is its purpose? Inner columns have a padding of the same qty, reversed.

In the picture, red line is .container, dashed line is .row. Btw the margin is visible only on the right.

Overflowing margin

Manaus
  • 431
  • 5
  • 17

2 Answers2

5

Because you're supposed to use them in combination with columns.

Columns generally have a padding to push the contents of them away from the border, in order to make it look nicer. However, when you are nesting columns within columns, the content keeps getting pushed inwards, which is mostly not a desired effect. To keep this from happening the rows have a negative margin, which pulls the columns back. In your case, it looks like you need to add a col-xs-12 around the column groups within the rows . This will prevent the content from being pulled too far.

Take a look here for a nicely explained introduction.

Here's a demonstration of how the .row class works:

.col1 {
  background: red;
}

.col2 {
  background: green;
}

body {
  font-family: sans-serif;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">

<div class="row">
  <div class="col-xs-12
                col1">
    <div class="col-xs-12
                col2">
      <div class="box">Without a row</div>
    </div>
  </div>
</div>

<br>
<div class="row">
  <div class="col-xs-12
                col1">
    <div class="row">
      <div class="col-xs-12
                col2">
        <div class="box">With a row</div>
      </div>
    </div>
  </div>
</div>
Maharkus
  • 2,841
  • 21
  • 35
  • This is so poorly designed... I can't use any vertical layout because there is no component that uses `flex-direction: column`, but I also have a REALLY hard time using the standard `div` with flexbox inside any vuetify grid layout because it adds random negative margins etc, – Bersan Jan 08 '20 at 16:49
  • >This is so poorly designed. - It is Vuetify! – Feofilakt Apr 08 '21 at 11:12
1

In general row is placed in container. container has padding of 15 and row has margin of -15

sql_dummy
  • 715
  • 8
  • 23