Ласі шматочки Grid-розкладки, частина 2: основи і термінологія - CSS-LIVE

1. Термінологія Grid
2. Grid-шаблон
3. Нумеровані Grid-лінії
4. Розміщення елементів
5. Негативні номера лінії і об'єднання осередків
6. Об'єднання рядів і висота колонок

Наша взаимовыгодная связь https://banwar.org/

Переклад статті Grid Tidbits part 2: terminology and basics з сайту thatemil.com , Автор - Еміль Б'єрклунд (твіттер - @ThatEmil ).

У цій статті ми познайомимося з термінологією «CSS Grid Layout», основами визначення grid-шаблонів і розміщення в них елементів.

Це друга із циклу відносно невеликих статей про «Grid Layout». У першій частині ми дізналися про призначення grid-ів і про поточну ситуацію в браузерах.

Для цього «ласого шматочка» ми зробимо наступне:

• Візьмемо елемент і перетворимо його в grid.
• Побачимо, як елементи самі розміщуються в grid'е
• Повправлятися в тому, як управляти цим розміщенням

Щоб пограти з прикладами з цієї статті, раджу скачати і запустити Google Chrome Canary , Оскільки у цього браузера найактуальніша реалізація.

Термінологія Grid

Grid layout працює за рахунок «розбивки» елемента - званого grid-контейнером - на ряди і колонки. Grid-елементи - безпосередні нащадки grid-контейнера можуть потім розміститися в цьому grid-е. Grid-елементи можуть займати одну grid-осередок, або охоплювати кілька рядів або колонок. Будь-які прямокутні частини grid'а собирательно називаються «grid-область». Коли ви створюєте ряди і колонки (збірно звані «grid-смуги»), ви також створюєте grid-лінії, утворені краями смуг.

Ми почнемо з створення простої сітки, а потім по ходу справи позначимо ці частини. Розглянемо розмітку зі звичайним контейнером div і трьома дочірніми елементами.

<Div class = "grid-container"> <div class = "grid-item-a"> A </ div> <div class = "grid-item-b"> B </ div> <div class = "grid -item-c "> C </ div> </ div>

Трохи базового оформлення, щоб задати деякі розміри і колір різних частин.

.grid-container {background-color: # E6CAD6; } [Class ^ = "grid-item"] {border: 1px solid #fff; font-size: 4em; min-height: 2.5em; line-height: 2.5em; text-align: center; color: #fff; } .Grid-item-a {background-color: # 3D74C7; } .Grid-item-b {background-color: # 85CAAA; } .Grid-item-c {background-color: # DAB97D; }

А що, якщо тепер ми накажемо елементу .grid-container відображатися як grid, і просто залишимо все як є?

.grid-container {display: grid; }

«Голий» grid-контейнер ( посилання на JSBin для малюнка 1 )

Візуально здається, що єдине, що сталося - те, що ширина трьох елементів зменшилася до ширини їх власного вмісту. Але фактично ми створили сітку з одного колонкою і трьома рядками, розмір яких визначений відповідно до вмісту. Причина цього - щось під назвою «неявна сітка», ми поговоримо про це докладніше в наступних статтях.

Зауважте, що у display буває також значення inline-grid - зовсім як inline-block або inline-flex. Як видно з його назви, працює як grid-контейнер, але розташовується в рядковому потоці.

Grid-шаблон

Щоб рухатися далі, потрібно зрозуміти, як працює grid. Скажімо, нам потрібно дві колонки по 50% кожна, і два рядки з height: auto - по висоті найвищого вмісту. Для цього завдання нам буде потрібна допомога grid-шаблону. Він задає смуги (колонки і ряди), і найпростіша форма їх опису - перерахування розмірів через пробіл, в порядку відображення.

Зауважте, що ці розміри визначають смужки в порядок направлення тексту, так що для мов, в яких пишуть зліва направо, перша колонка - крайня зліва, це змінюється при зміні значення direction.

.grid-container {display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto auto; }

Подивіться-но, вийшов повноцінний Grid! ( посилання на JSbin для малюнка 2 )

Ось так ось. Це як там не є справжня Grid-ова сітка. Grid-елементи якраз розміщуються в трьох з наших чотирьох осередків, а grid займає всю ширину. Чудово. Але ... ми ж ще нічого навіть не починали розміщувати, а елементи вже вишикувалися колонка до колонки, ряд до ряду - як це так? Ну, у grid-розкладки є щось, зване «автоматичним розміщенням», і за замовчуванням воно розмістить кожен елемент, один по одному в вихідному коді, в першу ж вільну позицію в першому ж рядку, де така знайдеться. Так що наші три дочірніх елементу самі собою займуть три з доступних порожніх клітинок. Те що треба.

Нумеровані Grid-лінії

Створивши дві grid-смуги в кожному вимірі, ми автоматично створили три grid-лінії в кожному вимірі. У двох колонок є ліва, середня і права лінії. Аналогічно у рядів є верхня, середня і нижня. Grid-лінії нумеруються, починаючи з 1. (Але не з 0. Ви занадто багато читаєте про JavaScript, друг)

У нашого grid'a (з напрямом тексту зліва направо) лінія 1 - це ліва линяючи колонки (перша), а лінія 3 - права (остання)

Номери grid-ліній. Бачу в них схожість з лініями лінійки в Illustrator, Photoshop, Sketch і т.д.

Розміщення елементів

А тепер сама мякотка: наказати елементам зайняти конкретну частину grid'а. Наприклад, можна наказати елементу .grid-item-a зайняти обидві колонки в першому ряду. Для цього треба вказати ті лінії, де починається і закінчується елемент.

.grid-item-a {grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3; }

Елемент А тепер охоплює весь перший ряд. ( Посилання на JSbin для малюнка 3 )

Але це трохи довгою. Можна використовувати коротку запис, об'єднавши властивості -start і -end в grid-row і grid-column, розділяючи початковий і кінцевий індекси слешем .

.grid-item-a {grid-row: 1/2; grid-column: 1/3; }

А була не була, давайте ризикнемо і спрессуем його ще сильніше. Оскільки ми фактично визначаємо grid-область, де розташовується елемент, є повністю скорочена властивість зі зручним назвою grid-area.

.grid-item-a {grid-area: 1/1/2/3; }

Не знаю, як ви, але я знаходжу це важким для читання. Порядок тут такий: row-start / column-start / row-end / column-end - тобто, в порівнянні зі скороченими записами margin і padding, поставлений з ніг на голову (до слова, причина тут в тому, що це дозволяє пропускати кінцеві положення для елементів, що охоплюють тільки одну клітинку).

Негативні номера лінії і об'єднання осередків

За замовчуванням елементи охоплюють один ряд або колонку. Як ми вже бачили, завдяки алгоритму автоматичного розміщення елементи автоматично розміщуються в першому пустому області, де можуть поміститися. Оскільки елемент .grid-item-a перший по порядку в вихідному коді, нам не потрібно піклуватися про наступні речі:

• Що він розташовується в першому ряду
• Що він охоплює один ряд

На секунду затримайте цю думку в голові.

Якщо хочете посилатися на grid-лінії в зворотному напрямку, то використовуйте негативні числа: крайня права лінія колонки знаходиться під номером 1, а крайня ліва - під -3. Нехай нам невідомо підсумкове число колонок в grid'е, зате ми впевнені, що .grid-item-a повинен охоплювати всі колонки. В цьому випадку негативна нумерація лінії дуже до речі.

Поєднання дефолтного розміщення з негативним індексуванням дозволяє найкоротшим способом визначити елемент, охоплює весь перший ряд .

.grid-item-a {grid-column: 1 / -1; }

Якщо необхідно, щоб замість цілого ряду елемент охоплював конкретне число колонок, то можна вказати це явно. Оскільки початкова позиція вже встановлена ​​автоматичним розміщенням (перший елемент по порядку в вихідному коді починається в колонці 1, рядку 1), можна конкретно вказати, що .grid-item-a займає дві колонки .

.grid-item-a {grid-column: span 2; }

Всі ці способи вказівки розміщення для цього конкретного grid-елемента призводять до одного результату, але розрізняються рівнем читабельності і тим, наскільки явно доводиться задавати положення і розмір елемента.

Об'єднання рядів і висота колонок

Якщо наказати елементу «А» охопити два ряди замість двох колонок, то можна розмістити його у вигляді сайдбара, а інші два елементи займуть залишилися дві порожні клітинки.

.grid-item-a {grid-row: 1 / -1; }

Тепер елемент «А» охоплює всю першу колонку. ( Посилання на JSBin для малюнка 4 )

Тепер, якщо елемент «С» буде набагато вище, елемент «А» як і раніше розтягнеться, щоб зайняти всю висоту grid-а. Немає більше проблем з «однаковою висотою колонок»

.grid-item-c {height: 6em; }

Елемент «C» зрушує висоту всього другого ряду. ( Посилання на для малюнка 5 )

Цього вистачить для створення базового grid-контейнера і розміщення елементів в створених grid-смугах - рядах і колонках. У наступній статті ми заглибимося в більш просунуті аспекти визначення grid'ов. Побачимося в третій частині!

PS Це теж може бути цікаво: