Створення адаптивної мобільної сітки Flexbox за допомогою SASS

При розробці сучасних веб-інтерфейсів важливо створювати макети, які є адаптивними, підходять для різних розмірів екрану і оптимізовані для мобільного дизайну в першу чергу. Хоча фреймворки, такі як Bootstrap та TailwindCSS, надають зручні, готові сіткові системи, існують ситуації, коли ви хочете створити власну кастомну сітку без повного UI-фреймворку.

Незважаючи на те, що CSS Grid є дуже корисною функцією для створення складних макетів, є ситуації, коли Flexbox може запропонувати більше контролю, зокрема для динамічного контенту або коли потрібно враховувати підтримку старих браузерів. Цей пост покаже, як створити гнучку, адаптивну сітку за допомогою SASS та Flexbox. Більш того, наступне рішення нагадує сіткову систему Bootstrap, з якою знайомі багато розробників.

Чому створювати кастомну сіткову систему?

Використання кастомної сіткової системи дає більше контролю та гнучкості над вашим макетом. Ви можете налаштувати сітку під свої конкретні потреби, без необхідності використовувати повну UI-бібліотеку. Використовуючи можливості Flexbox та SASS, ви можете створити чисту, масштабовану сіткову систему, яка адаптується до всіх розмірів екранів з легкістю.

У цьому пості ми створимо просту сітку, подібну до Bootstrap, використовуючи SASS, яку можна легко інтегрувати у ваш проект. Ми зосередимося на підході mobile-first, забезпечуючи, щоб сітка була оптимізована для малих екранів і поступово покращувалась для більших.

Код SASS для кастомної Flex сітки

Нижче наведений SASS код, який визначає адаптивну сіткову систему, схожу на сітку Bootstrap. Вона включає брейкпоїнти для різних розмірів екранів і використовує Flexbox для макета. Ви можете скопіювати та вставити цей код у ваш SASS файл:

// Bootstrap-подібна Flex сіткова система  
$breakpoint-sm: 576px;  
$breakpoint-md: 768px;  
$breakpoint-lg: 992px;  
$breakpoint-xl: 1200px;  
$gutter: 16px;

// Mixin для колонок  
@mixin make-xy($class) {  
 @for $i from 1 through 12 {  
 .#{$class}-#{$i} {  
 flex: 0 0 calc(#{100% / 12 * $i} - #{$gutter});  
 max-width: calc(#{100% / 12 * $i} - #{$gutter});  
 }  
 }  
}@include make-xy("col");@media (min-width: $breakpoint-sm) {  
 @include make-xy("col-sm");  
}@media (min-width: $breakpoint-md) {  
 @include make-xy("col-md");  
}@media (min-width: $breakpoint-lg) {  
 @include make-xy("col-lg");  
}@media (min-width: $breakpoint-xl) {  
 @include make-xy("col-xl");  
}// Row  
@mixin make-row() {  
 .row {  
 display: flex;  
 flex-wrap: wrap;  
 margin-right: -#{$gutter / 2};  
 margin-left: -#{$gutter / 2};  
 } .row > * {  
 padding-right: #{$gutter / 2};  
 padding-left: #{$gutter / 2};  
 }  
}@include make-row();

Пояснення коду

1. Брейкпоїнти: Сітка використовує стандартні брейкпоїнти: 576px для малих екранів, 768px для середніх екранів, 992px для великих екранів і 1200px для екстра- великих екранів. Ці значення можна налаштувати, що дозволяє точно відрегулювати макет для різних розмірів пристроїв.
2. Колонки з Mixin: Mixin make-xy генерує 12 колонок на основі системи flex, обчислюючи ширину для кожної колонки динамічно. Це забезпечує адаптивність сітки і її налаштування під різні розміри екрану.
3. Адаптивні медіа-запити: Медіа-запити використовуються для застосування стилів колонок на різних брейкпоїнтах. Наприклад, .col-md-4 дозволить колонці зайняти 4 з 12 частин сітки на середніх екранах.
4. Розташування рядка: Клас .row стилізується за допомогою flex, щоб забезпечити правильне вирівнювання колонок, а простір між колонками обробляється через відступи.

Використання сітки у вашому HTML

Щоб реалізувати сітку у вашому HTML, просто використовуйте наступну структуру.
Ось приклад того, як застосувати класи сітки для створення адаптивного макету:

    1    
    2    
    3    
    4    
 ```  У наведеному вище прикладі:  - На малих екранах (`col-12`), кожна колонка займає всю ширину. - На середніх екранах (`col-md-4`), кожна колонка займає 1/3 ширини. - На великих екранах (`col-lg-2`), кожна колонка займає 1/6 ширини.  Такий підхід забезпечує адаптивний макет, що підлаштовується під різні розміри екранів.  [повний код доступний у цьому gist на github.](https://gist.github.com/hoseinhamzei/4d72b1175e5ceaf74efafcdf11bc7acf)  ##CSS #frontenddevelopment



Перекладено з: [Creating a Responsive Mobile-First Flexbox Grid System with SASS](https://hoseinhamzei.medium.com/creating-a-responsive-mobile-first-flexbox-grid-system-with-sass-d727eebb416e)