Simulando o comportamento do layout grid com flex §

---

É possível simular o comportamento do layout grid utilizando apenas divs com display: flex, aninhando-as de uma maneira específica para criar uma grade de elementos. Embora o modelo de layout grid (grid) sirva para criar layouts de grade, o flexbox pode ser utilizado para alcançar o mesmo resultado.

Vamos considerar um exemplo de um layout de grid com duas colunas e três linhas. Para simular isso com flexbox, podemos criar uma estrutura aninhada de divs e aplicar estilos específicos.

.container {
	display: flex;
	flex-wrap: wrap;
	/* Permite que as "linhas" quebrem para a próxima linha */
}
 
.row {
	display: flex;
	width: 100%; 
	/* Garante que a "linha" ocupa a largura total do contêiner */
}
 
.column {
	flex: 1; 
	/* Expande para ocupar todo o espaço disponível na "coluna" */
	padding: 10px;
	border: 1px solid #ccc;
	box-sizing: border-box; 
}

<div class="container">
  <div class="column">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div class="column">
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

Neste exemplo, temos a classe .container que é um contêiner com a regra flex-wrap: wrap, permitindo que as colunas se movam para a próxima linha quando não há espaço suficiente. Cada .column representa uma coluna e contém divs com a classe .item. A propriedade flex: 1 nas colunas faz com que elas compartilhem igualmente o espaço disponível na linha.

Vantagens §

• Simplicidade: O uso exclusivo de flexbox pode simplificar o código em comparação com o modelo grid.
• Compatibilidade: flexbox é amplamente suportado em navegadores mais antigos.

Limitações §

• Complexidade: Para layouts mais complexos, o modelo grid pode ser mais expressivo e fácil de usar.
• Alinhamento: O alinhamento de itens em relação a linhas e colunas pode ser mais desafiador com flexbox.

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado