23
Май
2019

Объединение CSS Grid с сеткой Bootstrap

Объединение CSS Grid с сеткой Bootstrap

От автора: до того, как я открыл для себя CSS Grid, я часто использовал сетку Bootstrap. Сетка Bootstrap была разумным решением для многих проблем с адаптивностью, которые у меня в то время возникали. Затем я обнаружил CSS Grid. Преимущество CSS Grid над Bootstrap — это ее двумерная природа (возможность использовать строки и столбцы), а не одна строка в Bootstrap.

В Интернете много споров о том, что лучше, когда каждая из них должна использоваться и как их использовать. Это меня сильно смутило. Хотя я чаще использую CSS Grid, мне нравятся они обе. В то время, как CSS Grid значительно мощнее, я считаю, что сетка Bootstrap более гибкая. Мне действительно нужно выбирать?

Bootstrap имеет встроенную систему параметров сетки, которая работает на нескольких устройствах, и это помогло мне избежать использования медиа-запросов. Используя параметры сетки Bootstrap, я могу правильно расположить дивы так, как я хочу, чтобы они отображались на разных экранах без использования медиа-запросов. Вот что я имею ввиду:

Ссылка на codepen.

В приведенном выше коде я создал вложенную в section сетку с классом .section из четырех столбцов. Я на самом деле хочу, чтобы четыре столбца занимали половину ширины экрана на устройствах менее 998 пикселей и располагались друг над другом на небольшом экране для удобства чтения. Но CSS Grid не дает мне такой возможности. Они остается такими же, как вы можете видеть на изображении ниже.

для большого экрана

маленький экран (мобильное представление)

Вложенная сетка остается неизменной. Ине не нужно этого, и я не хочу указывать контрольные точки в CSS. Поэтому я решил вложить сетку bootstrap в класс .section, чтобы посмотреть, смогу ли я достичь желаемого результата.

Сетка Bootstrap позволяет размещать в строке до 12 столбцов. На большом экране четыре столбца располагаются рядом. Каждый столбец занимает 3 единицы из 12 столбцов.

большой экран > 1000 пикселей

планшеты

На среднем экране столбцы теперь занимают 6 единиц, общие 12 столбцов поделить на два столбца.

мобильное представление

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

Автор: Barri Sambaris

Источник: https://hackernoon.com

Редакция: Команда webformyself.

Share

Тебе может это понравится...