Bulma: Nesting in Grid

[vivekrajr]

Coming from Foundation, the one feature that I miss in Bulma is nested grid.

<div class="columns">
  <div class="column is-2"></div>
  <div class="column is-10">
    <div class="columns">
      <div class="column is-4"></div>
      <div class="column is-8"></div>
    </div>
  </div>
</div>

I don't see it in the docs and I don't see it in the road-map either. Am I missing the obvious?

[jgthms]

Sure, what are you trying to achieve? I believe there might be an issue with the .columns negative margins.

[vivekrajr]

@jgthms
A use case for what I am trying to achieve is for eg: a menu of 2 columns on the side and a content area of 10 columns to the right. I would like to further divide the content area into columns, say 4 colums and 8 columns

In Foundation, this could be done using

<div class="row">
    <div class="large-3 columns">
        Menu here
    </div>
    <div class="large-9 columns">
        <!-- Main content here -->
        <div class="row">
            <div class="large-4 columns">Main content first section</div>
            <div class="large-8 columns">Main content second section</div>
        </div>
    </div>
</div>

I was wondering if there is anything similar in Bulma

[spint]

@vivekrajr have you tried your code with the nested columns, because I think it works perfectly fine. I guess it's just not documented...

      <div class='columns'>
        <div class='column is-3'>
          <p class='notification is-danger'>side</p>
        </div>
        <div class='column is-9'>
          <div class='columns'>
            <div class='column is-4'>
              <p class='notification is-info'>content 1</p>
            </div>
            <div class='column is-8'>
              <p class='notification is-info'>content 2</p>
            </div>
          </div>
        </div>
      </div>

[hunzaboy]

@jgthms When we have nested columns then there is a positive margin of +0.75 creating inconsistency in the design.

[hunzaboy]

@vivekrajr I think this should be added to avoid the extra margin-bottom for nested columns.

.column .columns {
    margin-bottom: -0.75rem;
}

[Fcog]

is there a solution for nested columns?