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>