У багатьох випадках, можливо навіть майже у всіх, треки і лінії — це все, що вам потрібно, щоб розмітити сітку. Особливо для маленьких областей з динамічним контентом, таких як сітка для результатів пошуку або списку друзів, ви можете часто просто використовувати grid-template-columns, щоб вказати колонки, і використовувати grid-auto-rows, щоб вказати, якої висоти будуть нові рядки, і далі вже дозволити магії авто-розміщення CSS Grid’ів зробити свою справу.
Але буває, що речі не такі динамічні. Іноді у вас вже є заздалегідь визначений, фіксований набір елементів, який вам потрібно розкласти по сітці, ви вже точно знаєте, що де буде знаходитися, і вам всього лиш треба вказати браузеру, що і як робити без магії авто-розміщення. Дуже поширено при розмітці структур верхнього рівня для сайту робити так: header тут, навігація тут, профайл зображення он там, контент тут і готово.
Ви можете просто вказувати фіксуючі блоки треків до номерів рядків і це нормальна поширена практика. Для прикладу, припустимо ви кодували простий користувацький профайл з чотирма секціями: ім’я, аватар, секція інформації і список постів користувача. Ви могли б зробити приблизно так:
Замість вказівки рядків і колонок, ми розклали весь грід візуально з іменованими грід-областями, використовуючи те, що Рейчел Ендрю називає “ASCII art” методом для опису грида. Тут кожен рядок — це row, укладений у лапки (“…”), а кожній клітинці дається ім’я грід-області, якій вона належить. Якщо клітинці не потрібна приналежність до якоїсь області, то просто поставте крапку (ну або кілька крапок, це вже стилістичні вподобання) на це її місце. Клітинки розділені пропуском, у випадку зайвого пропуску, він не враховується, що робить форматування грида візуально дуже простим.
Кожна грід-область визначається всіма клітинками, які носять її ім’я. Як ви вже могли припустити, ваші області мають бути прямокутними і неперервними; без “тетристих” блоків і так званих кротових нір.
Після того, як ви вказали всі грід-області, ви можете прикріпити до них ваші грід елементи, виставивши grid-area для елемента, вказавши там ім’я області, в якій його розташувати.
Зверніть увагу, що тут немає grid-template-columns або grid-template-rows; За замовчуванням, треки просто виводяться з ASCII розмітки. З усього вище сказаного, ви досі можете використовувати ці правила, якщо потрібно; часто це все ще необхідно для виставлення розмірів. Ви також можете використовувати скорочення в grid-template, щоб вказати всі три правила одразу. В цьому скороченні, ви за бажанням можете задати кожному рядку висоту одразу після його опису в ASCII, а далі, якщо потрібно вказати розміри колонок, ви можете додати слеш після останнього рядка і вказати конкретні розміри під потрібними колонками:
Гриди включають інтуїтивний «ASCII-графічний» синтаксис, в якому ви можете віртуально «бачити» шаблон у коді, тому дуже легко створювати та змінювати сам шаблон. Навіть значні зміни можна зробити за кілька секунд. Цей інтуїтивний синтаксис також допомагає з адаптивним веб-дизайном.
Створення різних шаблонів для різних пристроїв стає досить простим завданням при використанні грід розмітки.
Давайте тепер створимо шаблон сайту, який виглядає таким чином:
Отже, ми зробимо
грід-контейнером, таким чином всі інші елементи стануть грід-елементами.А тепер давайте подивимось на ASCII-графіку, про яку ми говорили раніше.
grid-template-areas:
"header header header"
"nav article ads"
"footer footer footer";
Цей фрагмент визначає наш шаблон. Просто дивлячись на код, ми бачимо, що це 3х3 грід (три ряди і три колонки). Отже, у нас виходить п’ять грід-областей на дев’яти грід-клітинках, бо деякі наші грід-області займають кілька клітинок.
Ми також бачимо, що шапка займає весь перший ряд з трьох клітинок, а футер займає весь нижній ряд, також забираючи три клітинки. Навігаційна, контентна і рекламна секції разом ділять місце в другому ряді, де кожен з цих елементів отримує по одній клітинці.
Тепер ми можемо призначити кожну з цих грід-областей кожному елементу:
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
Властивість grid-area — це скорочення властивостей, яке дозволяє вам розміщувати грід-елементи в гріді. У нашому випадку ми просто посилаємося на назви, які ми вже заздалегідь вказали в grid-template-areas.
Більша частина шаблону вже завершена. Решта коду стосується розмірів, відступів та висот, тобто швидше декоративної частини.
Наступний код задає розміри рядкам і колонкам:
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
Перший та третій ряд — обидва висотою 60px, а другий ряд займає весь залишковий простір.
Перший стовпець дорівнює 20%, а третій — 15%. Другий займає весь залишковий простір.
Ви можете змінити шаблон просто перерасподіливши грід-області в grid-template-areas.
Отже, якщо ми змінимо на це:
grid-template-areas:
"nav header header"
"nav article ads"
"nav footer ads";
То в результаті отримаємо такий шаблон:
Проте вам може знадобитися регулювання розмірів, якщо ви переміщаєте грід з меншого місця на більше.
Наприклад, щоб зробити так:
Навігація тепер займає місце, де був контент, відповідно розміри були відрегульовані.
В іншому випадку у нас був би вузький контент і широка навігація. Таким чином, код зараз виглядає так.
Дано розмітку. Напишіть CSS. Кольори оберіть на свій смак. Текст Файг.txt.
