Imagine que você é responsável por transformar o layout criado pelo designer da sua equipe em uma página web utilizando o CSS, você saberia qual tipo de layout utilizar? Saberia integrar o layout e todas as suas features para uma página web funcional sem alterar o projeto inicial? Para solucionar problemas como esse o CSS detém formas específicas e também mais de uma forma para lidar com esses problemas que podem surgir, logo vamos entrar em detalhes sobre os principais métodos e recursos para sua tomada de decisões.
Positioning
O posicionamento, ou propriedade position altera a forma como o elemento se posiciona no documento e como ele se comporta ao redor dos demais elementos da página, os valores a serem utilizados dentro do position são: ‘relative’, ‘absolute’, ‘fixed’ e ‘sticky’, mas o valor padrão do elemento é o ‘static’.
Display
Essa propriedade chamada display pode determinar se a caixa dos elementos é considerada embutida ou em bloco, tendo duas opções de valores principais “inline” que deixa os elementos embutidos e se comportando como uma palavra em uma frase, “block” que faz com que os elementos criem uma nova linha para si próprios. Ainda existe o valor flex que determina que os filhos de um elemento se comportem como itens flexíveis e isso pode habilitar propriedades que controlam o alinhamento, a ordem e também o fluxo. Alguns valores podem ser utilizados para modificar o comportamento, as propriedades são ‘align-items’, ‘justify-content’ e ‘flex-wrap’.
Box Model
O box model ou modelo de caixa é uma forma de enxergar a web como sendo uma caixa, quando entendemos que tudo na nossa página está envolto por uma caixa podemos entender como criar layouts mais complexos organizando os elementos dispostos em nossos sites de forma alinhada. No modelo de caixa podemos aplicar uma caixa em bloco e definir as diferentes partes dessa caixa como a margem, a borda, o preenchimento e o conteúdo para que possam trabalhar juntos para criar uma caixa que pode ser visualizada na página.
CSS Grid
O grid se assemelha ao flexbox em diversas formas, porém é projetado para controlar os layouts de múltiplos eixos ao invés dos de eixo único. Ele permite que você escreva regras de layout em elementos com display: grid e apresente novos estilos de layout como nas funções repeat() e minmax(). Propriedades como grid-row e grid-column fazem com que o número de grids seja gerado baseado nas linhas ou colunas informadas dando mais controle sobre a forma que o site será gerado.
Flexbox
É um tipo de mecanismo de layout que atua geralmente em layouts unidimensionais, ou seja, layouts de um eixo único, sendo ele horizontal ou vertical. Normalmente o flexbox alinha os elementos filhos um ao lado do outro em uma direção inline e ao serem esticados passam a comportar-se como elementos em bloco.