Когда-нибудь использовал сеточную верстку (grid system, grid design)? Если да, то какая из них тебе больше всего нравится?

Да, использовал.

Предпочитаю использовать CSS Grid Layout.

Основные причины:

• Нативность. Это стандартная спецификация CSS, не требующая сторонних библиотек.
• Гибкость. Позволяет создавать сложные двумерные макеты (строки и столбцы) с большой точностью и контролем над размещением элементов.
• Отзывчивость. Легко адаптируется под разные размеры экранов, используя @media запросы и такие единицы измерения как fr.
• Чистота кода. В сравнении с блочной моделью, Grid often simplifies the markup, reducing the need for extra wrapper elements.

Пример базового использования:

/*
  Оборачивающий элемент с дисплеем grid.
  Задаем три колонки равной ширины и две строки с автоматической высотой.
*/
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px; /* Пространство между элементами */
}

/*
  Пример позиционирования элемента внутри сетки.
  Растягиваем элемент на две колонки, начиная со второй.
*/
.item {
  grid-column: 2 / span 2;
}

В прошлом также применял Bootstrap Grid System, который основан на Flexbox. Он полезен для быстрого создания типовых макетов, но менее гибок при работе со сложными структурами и привязан к определенным классам CSS.

В целом, CSS Grid предоставляет более мощные и гибкие инструменты для создания современных и сложных макетов без необходимости полагаться на сторонние фреймворки.