Group columns with the Bulma CSS framework

Asked

Viewed 89 times

0

I would like to create the following layout using the Bulma CSS framework.

inserir a descrição da imagem aqui

I have the following code.

<div class="columns">
    <div class="column is-2">AQUI</div>
    <div class="column is-2"></div>
    <div class="column is-2"></div>
  </div>

  <div class="columns">
    <div class="column is-2">AQUI</div>
    <div class="column is-2"></div>
    <div class="column is-2"></div>
  </div>

how do for the two columns with the name AQUI be one? vertically? to match the image?

I’m looking at the framework documentation, but I’m not getting it.

  • Is it possible with this structure or you just aren’t getting it?

2 answers

0

I believe it serves you well

<div class="columns"> 
    <div class="column">
      Primeira coluna
    </div>
    <div class="column">
      <div class="column">
        Segunda
      </div>
      <div class="column">
        E terceira
      </div>
    </div>
    <div class="column">
        <div class="column">
          Segunda
        </div>
        <div class="column">
          E terceira
        </div>
      </div>
  </div>

0

In the version that use the Bulma this way worked well. I put the "
" to mimic the context. But I think there are other interesting ways to do it without using comlumns. If you’re interested in doing otherwise tell me I set an example.

<div class="columns is-multiline">

  <div class="column has-background-info">
    <div class="columns">
      Primeira coluna
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
  <div class="column">
    <div class="column has-background-info">
      Segunda
      <br>
      <br>
      <br><br>
    </div>
    <br>
    <div class="column has-background-info">
      Segunda
      <br>
      <br><br>
      <br>
    </div>
  </div>
  <div class="column">
    <div class="column has-background-info">
      Terceira
      <br><br><br><br>
    </div>
    <br>
    <div class="column has-background-info">
      Terceira
      <br><br><br>
      <br>
    </div>
  </div>
</div>

I put it in the sandbox: https://codepen.io/nelloe86/pen/JjKREKp

Browser other questions tagged

You are not signed in. Login or sign up in order to post.