Andei dando uma olhada nas propriedades flex, e percebi que elas fazem a mesma coisa que as grid ou estou errado? Se sim qual a diferença delas ? Quando devo usar uma ou outra ?
1 Resposta
Conceitos
Flexbox:
Faz parte da especificação do CSS3 que promete organizar elementos na página previsivelmente quando o layout precisa ser visualizado em diversos tamanhos de tela e em diversos dispositivos. O Flexbox ajuda a organizar esses elementos sem a ajuda do
float
e também nos ajudam a sanar problemas de Box Model que normalmente acontecem quando acrescentamos,padding
,margin
eborder
além da largura do elemento.
(Fonte: Flexbox, CSS)
Grid:
É uma estrutura que permite o conteúdo ser empilhado verticalmente e horizontalmente de uma forma consistente e facilmente gerenciável. Além disso, o código de um sistema de grid é um "project-agnostic", dando-lhe um elevado grau de portabilidade, de modo que, possa ser adotado em novos projetos.
(Fonte: Grid,Tableless)
Diferença
Flexbox é essencialmente para colocar os itens em uma única dimensão - em uma linha ou uma coluna.
Grid é para o layout de itens em duas dimensões - linhas e colunas.
Quando usar?
As duas podem ser usadas em conjunto para ter um código melhor. O Grid
pode ser utilizado nas áreas externas (cabeçalho, corpo, menu, rodapé) e o FlexBox
para componentes.
Referências: