Grid¶
У веб-дизайні часто зустрічається компонування, що складається з верхнього, бічного, основного і нижнього колонтитулів.
Протягом багатьох років існувало безліч способів розв'язання цієї проблеми, але за допомогою CSS grid вона не тільки відносно проста, але має безліч варіантів. Сітка дозволяє поєднувати контроль, що забезпечується зовнішніми розмірами, з гнучкістю внутрішніх розмірів, що робить її ідеальним рішенням для таких макетів. Це з тим, що сітка — це спосіб компонування, призначений для двомірного вмісту. Тобто для одночасного компонування у рядках та стовпцях.
При створенні макету сітки задається сітка з рядками та стовпцями. Потім ви розміщуєте елементи на цій сітці або дозволяєте браузеру автоматично розміщувати їх у створених комірках. Сітка – це дуже багато, але, ознайомившись із її можливостями, ви зможете створювати макети у найкоротші терміни.
Огляд¶
Що можна робити за допомогою сітки? Сітчасті макети мають такі можливості. У цьому посібнику ви дізнаєтесь про всіх із них.
- Сітка може бути визначена за допомогою рядків та стовпців. Ви можете вибрати розмір цих рядків та стовпців, або вони можуть реагувати на розмір вмісту.
- Прямі дочірні елементи контейнера сітки будуть автоматично розміщені в цій сітці.
- Або ви можете розмістити елементи в потрібному місці.
- Лінії та області сітки можна назвати, щоб полегшити розміщення.
- Вільне місце у контейнері сітки може бути розподілене між доріжками.
- Елементи сітки можуть бути вирівняні у межах своєї області.
Термінологія Grid¶
У термінології Grid багато нового, оскільки CSS вперше з'явилася реальна система розмітки.
Лінії сітки¶
Сітка складається з ліній, які йдуть по горизонталі та вертикалі. Якщо сітка має чотири колонки, то буде п'ять ліній колонок, включаючи лінію після останньої колонки.
Лінії нумеруються, починаючи з 1, причому нумерація відповідає режиму запису та напрямку сценарію компонента. Це означає, що рядок стовпця 1 розташовуватиметься ліворуч мовою, написаною ліворуч праворуч, наприклад, англійською, і праворуч мовою, написаною праворуч ліворуч, наприклад, арабською.
Треки сітки¶
Треком називається простір між двома лініями сітки. Треки рядків знаходяться між двома лініями рядків, а треки стовпців між двома лініями стовпців. Під час створення сітки ми створюємо ці треки, призначаючи їм розмір.
Осередок сітки¶
Осередок сітки - Це найменший простір на сітці, що визначається перетином треків рядків і стовпців. Це так само, як комірка таблиці або комірка електронної таблиці. Якщо встановити сітку і не розмістити жодного елемента, то вони будуть автоматично розміщені по одному елементу в кожному заданому осередку сітки.
Область сітки¶
Декілька клітинок сітки разом. Області сітки створюються коли елемент охоплює кілька треків.
Проміжки¶
Між треками є проміжок чи смуга. Для цілей визначення розмірів діють як звичайні треки. У проміжок не можна помістити вміст, але можна розмістити елементи сітки через нього.
Контейнер сітки¶
HTML-елемент, до якого використано display: grid , що створює новий контекст форматування сітки для безпосередніх дочірніх елементів.
Елемент сітки¶
Елемент сітки - Це елемент, який є безпосереднім дочірнім елементом контейнера сітки.
Рядки та стовпці¶
Для створення базової сітки можна визначити сітку з треками трьох стовпців, двома треками рядків та проміжком між треками у 10 пікселів наступним чином.
Ця сітка демонструє багато того, що описано в розділі термінології. Вона має три треки у стовпцях. Кожен трек використовує свою одиницю довжини. У ній є два треки для рядків, один з яких використовує одиницю довжини, а інший auto. При використанні розміру треку auto можна вважати, що він має розмір, що дорівнює розміру вмісту. За промовчанням треки мають розмір auto.
Якщо елемент із класом .container має дочірні елементи, вони відразу ж вибудовуються на цій сітці. Це можна побачити в дії демонстраційного прикладу нижче.
Зрозуміти різні частини сітки допоможе накладення сітки у Chrome DevTools.
Відкрийте демонстраційний приклад у Chrome. Виділіть елемент із сірим фоном, що має ідентифікатор container . Виділіть сітку, вибравши піктограму сітки в DOM поруч із елементом .container . На вкладці Layout виберіть у списку, що випадає Display Line Numbers, щоб побачити номери рядків у сітці.
Сітка, виділена в Chrome DevTools, що показує номери рядків, осередків та треків.
Внутрішні ключові слова розміру¶
На додаток до розмірів довжини та відсотка, описаних у розділі Одиниці розміру, треки сітки можуть використовувати внутрішні ключові слова для визначення розміру. Ці ключові слова визначені в специфікації Box Sizing і додають додаткові методи визначення розмірів блоків CSS, а не тільки сітки треків.
Ключове слово min-content зробить трек настільки маленьким, наскільки це можливо, без переповнення його вмістом.При зміні макету сітки в прикладі на триколонні треки розміром min-content вони стануть вузькими, як найдовше слово в треку.
Ключове слово max-content має зворотний ефект. Треки стануть досить широкими, щоб весь вміст відображався у вигляді одного довгого безперервного рядка. Це може призвести до переповнення, оскільки рядок не буде обернутий.
Функція fit-content() спочатку діє подібно до max-content . Однак, як тільки трек досягає розміру, переданого у функцію, вміст починає загортатися. Так, функція fit-content(10em) створить трек розміром менше 10em, якщо розмір max-content менше 10em, але ніколи не більше 10em.
У наступній демонстрації спробуйте використати різні ключові слова внутрішнього розміру, змінюючи розміри треків сітки.
У цьому прикладі демонстрації можна помітити, що при використанні функції auto стовпці сітки розтягуються, щоб заповнити контейнер. Треки з автоматичними розмірами будуть розтягуватися за замовчуванням, якщо контейнер сітки має додатковий простір.
Одиниця виміру fr ¶
У нас є існуючі розміри довжини, відсотки, а також нові ключові слова. Існує також спеціальний метод визначення розмірів, який працює лише у сітковій компонуванні. Це одиниця fr - гнучка довжина, що описує частку доступного простору в контейнері сітки.
Блок fr працює аналогічно використанню flex: auto у flexbox. Він розподіляє місце після того, як елементи вже розміщені. Таким чином, можна отримати три колонки, які отримають однакову частку вільного простору:
Оскільки блок fr ділить доступний простір, його можна поєднувати з пробілами фіксованого розміру або треками фіксованого розміру.Щоб компонент мав елемент фіксованого розміру, а другий трек займав весь простір, що залишився, можна використовувати в якості трекліста grid-template-columns: 200px 1fr .
Використання різних значень одиниці fr дозволить розділити простір пропорційно. Великі значення набувають більше вільного місця. У демонстраційному прикладі нижче змініть значення третього треку.
Функція minmax() ¶
Ця функція дозволяє встановити мінімальний і максимальний розмір треку. Це може бути дуже корисним. Якщо взяти приклад блоку fr , який розподіляє простір, що залишилося, то його можна записати за допомогою minmax() як minmax(auto, 1fr) . Grid дивиться на власний розмір вмісту, а потім розподіляє доступне місце після надання вмісту достатнього місця. Це означає, що треки можуть займати не все вільне місце у контейнері гриду.
Щоб змусити трек займати рівну частку простору в контейнері сітки за винятком проміжків, використовуйте minmax. Замініть 1fr як розмір треку minmax(0, 1fr) . Таким чином, мінімальний розмір треку дорівнюватиме 0, а не мінімальному розміру вмісту. Тоді Grid візьме весь доступний розмір контейнера, віднімає розмір, необхідний для будь-яких зазорів, і розділить частину, що залишилася, відповідно до одиниць вимірювання fr .
repeat() нотація¶
Якщо потрібно створити 12-колоночну сітку треків з рівними колонками, можна використовувати наступний CSS.
Або можна записати його за допомогою repeat() :
Функція repeat() може бути використана для повторення будь-якої ділянки списку треків. Наприклад, можна повторити шаблон треків. Також можна мати кілька звичайних треків і розділ, що повторюється.
auto-fill та auto-fit ¶
Ви можете об'єднати все, що дізналися про розміри треків, minmax() та повторення, щоб створити корисний шаблон із макетом сітки. Можливо, ви не хочете вказувати кількість треків у колонках, а хочете створити стільки, скільки поміститься у контейнері.
Цього можна досягти за допомогою repeat() та ключових слів auto-fill або auto-fit. У демонстраційному прикладі нижче grid створить стільки треків розміром 200 пікселів, скільки вміститься в контейнері. Відкрийте демонстрацію в новому вікні та перегляньте, як змінюється сітка при зміні розміру області перегляду.
У демо-версії ми отримуємо стільки треків, скільки поміститься. Однак треки не є гнучкими. В кінці треку буде пробіл, поки не звільниться місце для іншого треку розміром 200 пікселів. Якщо додати функцію minmax() , можна запитати стільки треків, скільки поміститься, з мінімальним розміром 200 пікселів і максимальним 1fr . Потім Grid вибудовує треки розміром 200 пікселів, і весь простір, що залишився, розподіляється між ними порівну.
Таким чином, створюється двовимірний чуйний макет, що не вимагає жодних медіазапитів.
Між auto-fill та auto-fit існує тонка різниця. У наступній демонстрації ми розглянемо макет сітки за допомогою синтаксису, описаного вище, але з двома елементами сітки в контейнері сітки. Використовуючи ключове слово auto-fill, можна побачити, що було створено порожні треки. Змінимо ключове слово на auto-fit і треки зменшаться до розміру 0. Це означає, що гнучкі треки тепер ростуть і займають весь простір.
В іншому ключові слова auto-fill та auto-fit діють абсолютно однаково. Після заповнення першого треку між ними немає жодної різниці.
Авторозміщення¶
У демонстраційних версіях ви вже бачили, як працює автоматичне розміщення у сітці. Елементи розміщуються на сітці по одному в кожному осередку в порядку, в якому вони з'являються у вихідному тексті. Для багатьох макетів це може бути все, що вам потрібно. Якщо ж вам потрібний більший контроль, то можна зробити кілька речей. Перше – це налаштування авторозміщення.
Розміщення елементів у колонках¶
За замовчуванням у макеті сітки елементи розміщуються вздовж рядків. Замість цього можна змусити елементи розміщуватись у стовпцях, використовуючи команду grid-auto-flow: column . При цьому необхідно задати треки в рядках, інакше елементи створюватимуть власні треки в колонках і розташовуватимуться в одному довгому рядку.
Ці значення пов'язані із режимом запису документа. Рядок завжди йде у тому напрямку, в якому йде пропозиція в режимі запису документа чи компонента. У наступному демонстраційному прикладі можна змінити значення якості grid-auto-flow і властивості writing-mode .
Розповсюдження треків¶
Ви можете зробити так, щоб деякі або всі елементи макета, що розміщується, займали більше одного треку. Для цього використовуйте ключове слово span плюс кількість рядків, які необхідно охопити, як значення для grid-column-end або grid-row-end .
Оскільки ви не вказали grid-column-start, то як початкове значення використовується auto і розміщення відбувається відповідно до правил авторозміщення. Те саме можна вказати, використовуючи скорочення grid-column :
Заповнення пробілів¶
При автоматичному розміщенні макету, коли деякі елементи охоплюють кілька треків, у сітці можуть з'явитися незаповнені комірки.Поведінка сітки за умовчанням при повністю автоматичному розміщенні полягає в постійному просуванні вперед. Елементи будуть розміщуватися в порядку, в якому вони знаходяться в джерелі, або відповідно до модифікації властивості order . Якщо місця для розміщення елемента недостатньо, сітка залишить пробіл і перейде до наступного треку.
У наступному демонстраційному прикладі показано таку поведінку. Прапорець буде використовувати режим щільного пакування. Він включається, якщо привласнити параметр grid-auto-flow значення dense . При цьому значенні сітка братиме елементи, розташовані пізніше в макеті, і використовувати їх для заповнення пробілів. Це може призвести до того, що відображення буде відірвано від логічного порядку.
Розміщення елементів¶
Багато функціональних можливостей CSS Grid вам вже знайомі. Тепер давайте розглянемо, як розміщувати елементи у створеній сітці.
Перш за все необхідно пам'ятати, що CSS Grid Layout заснована на сітці пронумерованих ліній. Найпростіший спосіб розміщення елементів у сітці - це розміщення їх від одного рядка до іншого. У цьому посібнику ви дізнаєтеся про інші способи розміщення елементів, але у вас завжди буде доступ до цих пронумерованих ліній.
Для розміщення елементів за номерами рядків можна використовувати такі властивості:
У них є скоромовки, що дозволяють задавати відразу і початковий, і кінцевий рядки:
Для розміщення елемента встановіть початкову та кінцеву лінії області сітки, в яку він має бути поміщений.
Chrome DevTools може дати візуальну підказку по лініях для перевірки розташування елемента.
Нумерація рядків відповідає режиму та напрямку запису компонента.У наступному демонстраційному прикладі змініть режим або напрямок написання тексту, щоб побачити, як розташування елементів узгоджується з течією тексту.
Укладання елементів у стопку¶
Використовуючи позиціонування по лініях, можна поміщати елементи в одну і ту саму комірку сітки. Це означає, що елементи можна укладати один на одного або частково перекривати один елемент іншим. Елементи, розташовані в джерелі пізніше, будуть відображатися поверх елементів, які були раніше. Як і у випадку позиціонованих елементів, порядок укладання можна змінити за допомогою z-index .
Негативні номери рядків¶
При створенні сітки за допомогою grid-template-rows та grid-template-columns створюється так звана явна сітка. Це сітка, яку ви визначили та задали розмір треків.
Іноді виникають елементи, які відображаються поза цією явною сіткою. Наприклад, можна визначити треки стовпців, а потім додати кілька рядів елементів сітки, не визначаючи треки рядків. Розмір треків буде автоматично заданий за промовчанням. Також можна помістити елемент за допомогою grid-column-end, який знаходиться за межами явно заданої сітки. В обох випадках grid створить треки для роботи макета, і ці треки називаються явною сіткою.
У більшості випадків немає різниці, з якою сіткою працювати – явною чи неявною. Однак при розміщенні об'єктів на основі ліній можна зіткнутися з основною різницею між ними.
Використовуючи негативні номери рядків, можна розміщувати елементи кінцевого рядка явної сітки. Це може бути корисним, якщо потрібно, щоб елемент розташовувався від першого до останнього рядка стовпця. У цьому випадку можна використовувати grid-column: 1/-1. Елемент розтягуватиметься прямо по явній сітці.
Однак це працює лише для явної сітки. Візьмемо макет з трьома рядами елементів, що автоматично розміщуються, де перший елемент повинен простягатися до останнього рядка сітки.
Ви можете подумати, що цьому елементу можна надати grid-row значення: 1 / -1 . У наведеній демонстрації видно, що це не працює. Треки створюються в неявній сітці, і немає можливості дістатися кінця сітки за допомогою -1 .
Зміна розміру неявних треків¶
Треки, створені в неявній сітці, за промовчанням матимуть автоматичний розмір. Однак, якщо ви хочете керувати розмірами рядків, використовуйте властивість grid-auto-rows , а для стовпців - grid-auto-columns .
Щоб створити всі неявні рядки з мінімальним розміром 10em та максимальним розміром auto :
Створити неявні стовпці з шаблоном треків шириною 100px і 200px . У цьому випадку перший неявний стовпець матиме розмір 100px, другий - 200px, третій - 100px і т.д.
Іменовані лінії сітки¶
Розміщувати елементи в макеті може бути зручніше, якщо лінії мають назву, а чи не номер. Ви можете присвоїти ім'я будь-якої лінії сітки, додавши її назву між квадратними дужками. Можна додати кілька імен, розділяючи їх пробілом усередині тих самих дужок. Після надання рядкам імен їх можна використовувати замість номерів.
Області шаблону сітки¶
Можна також присвоїти ім'я області сітки і помістити елементи в ці області. Це дуже зручна техніка, оскільки вона дозволяє побачити, як виглядає ваш компонент прямо у CSS.
Для початку задайте ім'я прямим дочірнім елементам контейнера сітки за допомогою grid-area :
Ім'я може бути будь-яким, крім ключових слів auto і span. Після того, як всі елементи названі, за допомогою властивості grid-template-areas визначте, які сітки буде займати кожен елемент.Кожен рядок визначається у лапках.
При використанні grid-template-areas є кілька правил.
- Значення повинно бути повною сіткою без порожніх осередків.
- Щоб розділити треки, повторіть ім'я.
- Області, створені повторенням імені, мають бути прямокутними і неможливо знайти роз'єднані.
При порушенні будь-якого з перерахованих правил значення вважатиметься недійсним та відкидатиметься.
Щоб залишити білий простір на сітці, натисніть . або кілька символів без пробілу між ними. Наприклад, щоб залишити порожнім найпершу комірку сітки, можна додати серію символів . :
Оскільки весь макет в одному місці, його легко перевизначити за допомогою медіазапитів. У наступному прикладі я створив двоколонковий макет, який переходить у триколоночний шляхом перевизначення значень grid-template-columns та grid-template-areas . Відкрийте приклад у новому вікні, щоб пограти з розміром області перегляду та побачити, як змінюється макет.
Ви також можете побачити, як властивість grid-template-areas пов'язана з write-mode та напрямком, як і в інших методах сітки.
Короткі властивості¶
Існують дві властивості, що дозволяють задавати багато властивостей сітки одним махом. Вони можуть здатися трохи заплутаними, поки ви не розберетеся, як вони пов'язані між собою. Використовувати їх чи віддати перевагу довгій формі — вирішувати вам.
grid-template ¶
Властивість grid-template є скороченням для grid-template-rows , grid-template-columns та grid-template-areas . Спочатку визначаються рядки, а потім значення grid-template-areas. Розмір стовпців додається після символу / .
Властивість grid
Скорочення grid може бути використане так само, як і скорочення grid-template . При використанні всіх інших властивостей сітки, які він приймає, будуть повернуті до вихідних значень. Повний набір такий:
- grid-template-rows
- grid-template-columns
- grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
Це скорочення можна використовувати, наприклад, визначення поведінки неявної сітки:
Вирівнювання¶
У сітчастій верстці використовуються ті ж властивості вирівнювання, про які ви дізналися з посібника з flexbox. У сітці властивості, що починаються з justify-, завжди використовуються на осі inline - напрямку, в якому йдуть пропозиції у вашому режимі написання.
Властивості, що починаються з align-, використовуються на осі блоку, у напрямку, в якому розташовуються блоки в режимі написання тексту.
- justify-content та align-content : розподіляють додатковий простір у контейнері сітки навколо або між треками.
- justify-self і align-self : застосовуються до елемента сітки для його переміщення всередині сітки, в яку він поміщений.
- justify-items та align-items : застосовуються до контейнера сітки для встановлення всіх властивостей justify-self для елементів.
Розподіл додаткового простору¶
У цьому прикладі сітка більше, ніж простір, необхідне розміщення треків фіксованої ширини. Це означає, що ми маємо простір як у лінійних, так і в блокових розмірах сітки. Спробуйте різні значення align-content і justify-content, щоб побачити, як поводяться треки.
Зверніть увагу, що при використанні таких значень, як space-between, зазори стають більшими, а будь-який елемент сітки, що охоплює два треки, також збільшується, щоб зайняти додатковий простір, доданий до зазору.
Як і у випадку з flexbox, ці властивості працюють лише за наявності додаткового простору для розподілу. Якщо треки сітки акуратно заповнюють контейнер, розподіляти простір не доведеться.
Переміщення вмісту¶
Елементи з кольором фону повністю заповнюють область сітки, в яку вони поміщені, оскільки початковим значенням для justify-self та align-self є stretch .
Якщо елемент є зображення чи щось інше з властивим йому співвідношенням сторін, то щоб уникнути розтягування елементів формою початковим значенням буде start , а чи не stretch .
У демонстраційному прикладі змініть значення justify-items і align-items , щоб побачити, як змінюється розташування елементів. Область сітки не змінює розмір, натомість елементи переміщуються всередині заданої області.
Ресурси¶
У цьому посібнику наведено огляд різних частин специфікації макету сітки. Щоб дізнатися більше, зверніться до таких ресурсів.
Сітка - Bootstrap 5: Основи верстки
Сітка – головний компонент фреймворку Bootstrap. Різні проекти підключають Bootstrap лише для можливості використовувати сітку. Справді, система сіток вже давно відпрацьована на сотнях проектів та налагоджена.
Розуміння роботи сітки в Bootstrap – найважливіша навичка під час роботи. Зрозумівши хитрощі побудови шаблонів, ви зможете робити складні макети і не вдаватися до непотрібних дописів стилів.
З курсу Grid ви знаєте, що сітка - система ліній, за якими вибудовується контент всередині шаблону. Ці лінії є невидимими. Подивіться на шаблон блогу Хекслета. На зображенні вказана сітка проекту. Темними лініями позначені колонки, а помаранчевими відступами між колонками.Вивчіть цей приклад і знайдіть закономірності того, як побудований контент усередині блогу.
Сітки Bootstrap відповідають за розкладку блоків і за адаптивність. Сітка визначає, як на різних дозволах відображатимуться контентні блоки.
Сітку можна розбити на три складові:
Як приклад використовуємо код із використанням сітки Bootstrap:
class="container">
class="row">
class="col">
Хекслет - практичні курси з програмування. Ми допомагаємо новачкам стати професійними програмістами, а досвідченим розробникам отримувати нові знання та зростати професійно.
Ми вважаємо, що справжній програміст повинен розуміти, як працює комп'ютер, і мати обчислювальне мислення. Він має бачити проблему, а не завдання. Повинен вміти аналізувати та розмірковувати на рівні проблеми і вище, а не лише на рівні коду.
За сьогоднішньої різноманітності навчальних матеріалів, курсів і книг, головне питання, яке постає перед новачком, це не «де вчитися?», а «що і в якому порядку вчити?». Існує безліч думок із цього приводу. Хтось радить починати з математики, хтось радить конкретні мови та технології.
У цій розмітці демонструється підхід контейнер → рядок → колонка. Додавши текст у колонку із класом .col, вийде наступний макет:
Візуально здається, що нічого особливого не сталося, а текст вивівся так, якби не додавали контейнери, рядки, стовпці. Але ж це не так! Вже запущено механізм адаптивної сітки та вибудовування колонок. Додамо ще одну колонку з тим самим текстом:
class="container">
class="row">
class="col">
Хекслет - практичні курси з програмування.Ми допомагаємо новачкам стати професійними програмістами, а досвідченим розробникам отримувати нові знання та зростати професійно.
class="col">
Ми вважаємо, що справжній програміст повинен розуміти, як працює комп'ютер, і мати обчислювальне мислення. Він має бачити проблему, а не завдання. Повинен вміти аналізувати та розмірковувати на рівні проблеми і вище, а не лише на рівні коду.
Вийшло дві колонки однакової ширини. Настав час уважніше вивчити класи, які описані в HTML.
container
Контейнер є ключовим елементом сітки Bootstrap. Головне завдання контейнера – обмеження ширини контенту. За умовчанням, контент у Bootstrap має максимальну ширину 1140 пікселів. Ця умова обумовлюється доступністю: у цих рамках текст органічно розташовується по ширині та вміщує приблизно 120 символів. Більше символів важче читати, оскільки оку складніше переміщатися між рядками.
Це обмеження можна оминути. Для цього у Bootstrap використовується клас .container-fluidщо не обмежує ширину контенту всередині себе. Двохколоночний макет з прикладу вище при використанні .container-fluid буде виглядати так:
Усередині контейнер зберігає елементи будь-яких видів. Це не обов'язково мають бути рядки. Якщо для елементів сітка не потрібна, то не варто створювати рядок з одним елементом всередині.
Важливо: Не вкладайте контейнер у контейнер. Це погана практика. За необхідності в кількох контейнерах, замість вкладення один в одного, розділіть їх. Якщо в процесі розмітки помітили, що потрібен контейнер у контейнері, то заспокойтеся, попийте каву та перегляньте підхід.
row
Як і таблицях, рядки — невід'ємний атрибут стовпців.У Bootstrap рядок бере на себе роль flex-контейнера, всередині якої будуть розміщені flex-елементи стовпці. Якщо пропустити обгортку, стовпці перестануть працювати.
Клас .row має такі стилі:
.row
display:
flex;
flex-wrap:
wrap;
margin-right:
-15px;
margin-left:
-15px;
>Цікавим тут є використання негативних зовнішніх відступів. Цей прийом використовується через те, що колонки всередині Bootstrap мають внутрішні відступи, які відокремлюють колонки один від одного на фіксоване значення 30 пікселів. Щоб компенсувати відступи ліворуч і праворуч і не утворити зайві відступи у першого та останнього елемента у рядку використовуються негативні відступи у контейнера, яким є .row.
Усередині .row містяться лише колонки! Це гарантує правильну вкладеність та можливість створювати адаптивність. Сторонні елементи виносяться за межі .row.
Оскільки .row flex-контейнер, то до нього можна використовувати доступні характеристики, описані в курсі Flex
col та col-*
У прикладі з двоколоночним макетом використовувався клас .col, який рівномірно розподіляє простір між колонками з такими класами всередині контейнера .row. У макетах така операція часто не потрібна, а необхідно дати блокам свою кількість колонок. Bootstrap – 12-колонова система. З цього випливає, що крім класу .col при створенні сітки доступні 12 класів виду .col-*де * - кількість колонок, які займе елемент.
class="container">
class="row">
class="col-4">
Хекслет - практичні курси з програмування. Ми допомагаємо новачкам стати професійними програмістами, а досвідченим розробникам отримувати нові знання та зростати професійно.
class="col-8">
Ми вважаємо, що справжній програміст повинен розуміти, як працює комп'ютер, і мати обчислювальне мислення. Він має бачити проблему, а не завдання. Повинен вміти аналізувати та розмірковувати на рівні проблеми і вище, а не лише на рівні коду.
За сьогоднішньої різноманітності навчальних матеріалів, курсів і книг, головне питання, яке постає перед новачком, це не «де вчитися?», а «що і в якому порядку вчити?». Існує безліч думок із цього приводу. Хтось радить починати з математики, хтось радить конкретні мови та технології.
У цьому прикладі перша частина тексту отримала 4 колонки з 12, друга частина тексту отримала 8 колонок з 12. Bootstrap автоматично переносить колонки, якщо сумарно вони займають більше 12 частин. Якщо в рядку менше колонок, при додаванні нового елемента можна забути цей момент.
Можна комбінувати клас .col з класами .col-*. Це дозволить обмежувати лише необхідну частину, автоматично прораховуючи місце для колонки із класом. .col. Наприклад, створюючи двоколоночний макет, вказується col-* для сайдбару та .col для контентної частини
class="container">
class="row">
class="col-3">
class="col">
Усередині колонок, як ви можете здогадатися, може лежати будь-який контент. У ролі колонки може виступати будь-який елемент.
Відкрити доступ
Курси програмування для новачків та досвідчених розробників. Почніть навчання безкоштовно
- 130 курсів, 2000+ годин теорії
- 1000 практичних завдань у браузері
- 360 000 студентів
Наші випускники працюють у компаніях:
