CRIANDO SEU PRÓPRIO 12 COLUMNS GRID LAYOUT COM CASCADING STYLE SHEETS (CSS)

A pouco tempo atrás lidar com alinhamentos em css era literalmente uma dor de cabeça, esse é o primeiro de uma série de mini tutoriais que vou apresentar a vocês alguns truques que vão nos ajudar a entender melhor toda magia por trás do FlexBox Layout com Cascading Style Sheets - CSS

Desde o lançamento do CSS3 temos um recurso chamado FlexBox Layout, que mudou a forma de como programadores trabalham com alinhamentos de elementos HTML no browser. Frameworks css como bootstrap, material-ui e foundation, auxiliam bastante na construção e estilização de websites, mas existem cenários em que queremos criar nossa própria estilização afim de criar um layout mais singular, então surge uma dúvida!

- É necessário eu ter algum desses frameworks instalados no meu projeto apenas para usar os recursos de grid layout que eles proporcionam?

A resposta é: Não!, e criar uma solução dinâmica e escalável é mais simples do que parece. então vamos utilizar o flexbox layout para criar nosso próprio sistema de 12 columns grid. chega de enrolação e bora codar.

Primeiro vamos definir nossas classes no css, uma row com display flex indicará que nossa div e todos seus filhos são flexíveis, e definir nossas col-n da seguinte maneira:

E Por fim nosso código em HTML

É importante entender que cada col-n será tratada internamente pelo flexbox como col-n/12, esse resultado será automaticamente representado em porcentagem (%). Se formos utilizar col-8, logo temos 8/12 = 0.66, então uma div com col-8 ocupará 66% do tamanho da janela do browser.

Para que essas mudanças fiquem mais explícitas visualmente, vamos dizer que cada div filha da nossa classe row vai receber a seguinte estilização:

Finalmente podemos ver um resultado visual a partir da imagem abaixo:

Observe que, ao redimensionar o browser, nosso layout se adapta proporcionalmente.

Então é isso pessoal, espero que este conteúdo seja útil pra vocês, abraço!