Junior
Alguma vez usaste uma grade (por exemplo, sistema de grade ou design de grade)? Se sim, qual é o seu favorito?
sobes.tech IA
Resposta da IA
Sim, utilizo ativamente o layout de grelha, tanto baseado no CSS Grid Layout quanto com frameworks.
A minha abordagem favorita é o uso de CSS Grid Layout puro.
Vantagens do uso de CSS Grid Layout:
- Nativo: É um módulo padrão de CSS, que não requer a integração de bibliotecas externas.
- Flexibilidade: Permite criar layouts bidimensionais complexos com controlo total sobre o posicionamento e o tamanho dos elementos.
- Responsivo: Adapta-se facilmente a diferentes resoluções de ecrã através de consultas de mídia.
- Código limpo: Permite alcançar uma marcação limpa e compreensível sem envoltórios desnecessários.
Exemplo de marcação básica com CSS Grid:
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Criação automática de colunas */
gap: 20px; /* Espaçamento entre elementos */
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
Embora prefira CSS Grid puro, em projetos onde já são utilizados certos frameworks (por exemplo, Bootstrap ou Tailwind CSS), também uso ativamente os seus sistemas de grelha integrados. A escolha depende dos requisitos do projeto e dos padrões adotados.