Grid вместо Bootstrap

Мы уже рассматривали пример использования сетки вместо Bootstrap в статье CSS Grid Layout. grid-template-areas. Подытожим общие части теории.

Стандартая страница имеет шапку, подвал, боковое меню и основной блок для вывода информации.

<div class="container">
  <div class="header">Шапка</div>
  <div class="menu">Меню</div>
  <div class="content">Основной блок</div>
  <div class="footer">Подвал</div>
</div>

Страницы принято верстать при помощи сетки, например, Bootstrap использует 12-колоночную сетку. Мы можем самостоятельно реализовать подобную сетку.

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.header {
  grid-column: span 12;
}

.menu {
  grid-column: span 3;
}

.content {
  grid-column: span 9;
}

.footer {
  grid-column: span 12;
}

Добавляем адаптивность. Достаточно определить дополнительные медиа-запросы. Например, добавим запросы для планшетов (ширина 768 пикселей и мобильных устройств (ширина 480 пикселей).

@media screen and (max-width: 768px) {
  .navigation-menu {
     grid-column: span 6;
  }
  .main-content {
    grid-column: span 6;
  }
}

@media screen and (max-width: 480px) {
  .navigation-menu {
    grid-column: span 12;
  }
  .main-content {
    grid-column: span 12;
  }
}

Захотели расположить меню над шапкой сверху для мобильных устройств? Добавим дополнительную строчку кода:

@media screen and (max-width: 480px) {
  .menu {
    grid-row: 1;
    grid-column: span 12;
  }
  .content {
    grid-column: span 12;
  }
}

Попробуйте изменить размеры браузера, чтобы увидеть, как меняется макет.

Не забывайте, что можно установить любое число колонок вместо стандартных 12 колонок в Bootstrap. Кроме того, можно задавать количество колонок в строке для каждой сетки.

У колонок Bootstrap слева и справа есть отступ в 10 пикселей и для удаления отступов приходится переписывать свойства. В CSS Grid вы контролируете все классы и можете устанавливать padding в любом месте.

Можно отказаться от загрузки библиотеки Bootstrap, которая замедляют загрузку страницы.

Вернуться в раздел о CSS Grid Layout

Реклама