Alguma vez usou um sistema de grelha (sistema de grelha, design de grelha)? Se sim, qual deles gosta mais?

Sim, já utilizei.

Prefiro usar CSS Grid Layout.

Razões principais:

• Nativo. É uma especificação padrão do CSS, que não requer bibliotecas externas.
• Flexibilidade. Permite criar layouts bidimensionais complexos (linhas e colunas) com grande precisão e controlo sobre a colocação dos elementos.
• Responsividade. Adapta-se facilmente a diferentes tamanhos de tela, usando consultas @media e unidades de medida como fr.
• Limpeza do código. Em comparação com o modelo de caixa, o Grid simplifica muitas vezes a marcação, reduzindo a necessidade de elementos de envolvimento adicionais.

Exemplo de uso básico:

/*
  Elemento envolvente com display grid.
  Definimos três colunas de igual largura e duas linhas com altura automática.
*/
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px; /* Espaço entre elementos */
}

/*
  Exemplo de posicionamento de um elemento dentro da grelha.
  Estendemos o elemento por duas colunas, começando na segunda.
*/
.item {
  grid-column: 2 / span 2;
}

No passado também utilizei Bootstrap Grid System, que é baseado em Flexbox. É útil para criar rapidamente layouts típicos, mas menos flexível para estruturas complexas e está ligado a classes CSS específicas.

No geral, CSS Grid fornece ferramentas mais poderosas e flexíveis para criar layouts modernos e complexos sem necessidade de depender de frameworks externos.