Bulma: Grid columns causing horizontal scrolling

[hd-diegocortez]

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.7.2]

Description

I have a hero element that contains 3 columns, the first one is-3 the second one is is-6 and the last one is is-3. So I have 12 at the end, which must be full with 25% 50% 25%

But at the end, I have a horizontal scrolling caused by margins in the columns parent. If I remove margin left and margin right everything is ok.

the final code is:

<section class="hero is-fullheight">
  <div class="columns">
      <div class="column is-3">
        content
      </div>
      <div class="column is-6">
        content
      </div>
      <div class="column is-3">
        content
      </div>
  </div>
</section>

Am I doing something wrong?

[zihotki]

Can confirm the behavior with v0.7.4

[darim92]

Can confirm too with Bulma v0.7.4

[Sogl]

Same here, 0.7.4

[james-wasson]

This seems to be an issue with the negative margins on the .columns container. I have a feeling that this is intended to allow the columns to be displayed "at full width" while still supporting padding and wrapping.

I have added a .grid style (PR #2567) which may fix the issue when it gets merged in

[stelcodes]

I was having the same problem! This fixed the issue for me:
.columns { max-width: 100%; }

[DannyCare]

I was having the same issue whilst building my first site with Bulma. After looking at the documentation I decided to give the .is-gapless class a try, and it seemed to solve the horizontal scrolling overflow problem for me.

<div class="columns is-gapless">

I then realised for my use case I wouldn't really ever need any baked-in margins whilst using a grid system, so I added an override to the .columns class that basically does the job of the .is-gapless class.

.columns {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;

  &:not(:last-child) {
    margin-bottom: 0;
  }
}

And then I can just declare the columns class as before:
<div class="columns">

I'm coming from the (now abandoned) Foundation framework, and this solution for me gives a similar experience to Foundation's XY Grid.

I'm not recommending this for everyone, just thought I'd share for anyone in a similar situation.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[eledwinn]

Same here, 0.9.0.

@import "node_modules/bulma/sass/utilities/_all.sass";
@import "node_modules/bulma/sass/grid/columns.sass";

<div class="columns">
  <main class="column is-8">
    Hello
  </main>
  <aside class="column is-4">
    World
  </aside>
</div>