No space between columns using the Flex Box Grid system

Question

Using the Flex Box Grid system . What is the correct way of removing the spacing between two 50% width columns?

Is there a standard class available for this? I can't find one on the official website.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            col 1
        </div>
        <div class="col-md-6">
            col 2
        </div>
    </div>
</div>

Answer 1

I have not used this grid system, but I can see from inspecting the elements in my browser's dev tools that the space between elements is created with the padding-right and padding-left properties. You could try adding another class name to your nested elements, and write rules for that class which override the padding-right and padding-left.

The css would look something like this. Your selector should have a higher specificity than the selectors applied by Flex Box Grid System. If you need to learn about specificity, here is a good guide: https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

.container .row .noPadding {
    padding-right: 0;
    padding-left: 0;
}

The html would look like this:

<div class="container">
    <div class="row">
        <div class="noPadding col-md-6">
            col 1
        </div>
        <div class="noPadding col-md-6">
            col 2
        </div>
    </div>
</div>

Alternatively, you could refrain from applying classes from the Flex Box Grid System on the two elements that you don't want spaced, and just use the css spec's flex property. Here is a concise guide to css flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

One way is to use the child-no-padding class in the row div:

.child-no-padding>div {
  padding: 0 !important;
}

By this way you prevent from repetitive no-padding class name in the child elements.

Sample:

 .child-no-padding>div { padding: 0 !important; } .col-2{ background: #00fff5; border: 1px solid #6cccca; text-align:center; font-size:.8em; color:white; } 

 <div class="container"> <div class="row child-no-padding"> <div class="col-2"> col 1 </div> <div class="col-2"> col 2 </div> <div class="col-2"> col 3 </div> <div class="col-2"> col 4 </div> <div class="col-2"> col 5 </div> <div class="col-2"> col 6 </div> </div> </div> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 

Answer 3

Two options:

1) If you need to remove the row-column spacing (gutters) globally

You can directly change the :root variables in flexboxgrid.css or override them in your custom css file.

:root {
    --gutter-compensation: 0; // remove negative margins for row
    --half-gutter-width: 0; // remove padding from columns
}

2) You can use a utility class, if you need to remove spacing only in a specific section

Borrowing the concept from Bootstrap , you can just add a class which removes negative margin from .row and padding from .col-* ,

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Then add .no-gutters class with .row .

<div class="container">
    <div class="row no-gutters">
        <div class="col-md-6">
            col 1
        </div>
        <div class="col-md-6">
            col 2
        </div>
    </div>
</div>