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.

css bulma columns

  • 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 css bulma columns

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