Sintaxe basica

O Jasmine UI utiliza como meio padrão para a construção de colunas o Flexbox. O flexbox é um modelo de layout web CSS3. Permite que elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela.

No modelo abaixo, temos uma pequena demonstração para a criação do layout fluido.

                    
<div class="container-fluid">
    <div class="content">
        <div class="box">
            Responsive
        </div>
    </div>
</div>  
                    
                

Sintaxe avançada

Nesse exemplo podemos observar que a classe container ao contrario do exemplo acima, não foi nomeada como container-fluid.

A classe container- é um prefixo onde o valor restante é opcional.

                    
<div class="container-apresentation">
    <div class="content">
        <div class="box">
            Responsive
        </div>
    </div>
</div>  
                    
                

Sintaxe alternativa

                    
<div class="row">
    <div class="col-s12 col-m10">
        <div class="box">
            <div class="item">ITEM 01</div>
            <div class="item">ITEM 02</div>
            <div class="item">ITEM 03</div>
        </div>
    </div>
</div>  
                    
                
ITEM 01
ITEM 02
ITEM 03