0

Gostaria de criar o seguinte layout utilizando o framework Bulma CSS.

inserir a descrição da imagem aqui

estou com o seguinte código.

<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>

como faço para as duas colunas com o nome AQUI serem uma só? verticalmente? para que fique igual a imagem?

estou olhando a documentação do framework, mas não estou conseguindo.

1
  • É possível com essa estrutura ou vc apenas não está conseguindo?
    – Sam
    Commented 13/05/2020 às 21:40

2 Respostas 2

0

Acredito que assim te atenda

<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

Na versão que uso do bulma essa forma funcionou bem. Coloquei os "
" para imitar o contexto. Porem acho que tem outras formas interessantes para fazer sem usar o comlumns. Caso tenha interesse fazer de outra forma diz-me que monto um exemplo.

<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>

Coloquei na sandbox: https://codepen.io/nelloe86/pen/JjKREKp

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .