Макети CSS Grid Starter - CSS-хитрощі

Це колекція початкових шаблонів для макетів і шаблонів із використанням CSS Grid. Ідея тут полягає в тому, щоб продемонструвати, на що здатна техніка, і створити вихідну точку, яку можна перепрофілювати для інших проектів.

Пам’ятайте, що підтримка браузера для Grid хороша, але для застарілих браузерів потрібні резервні копії. Це означає, що пряме копіювання та вставлення цих файлів може не підходити для деяких випадків використання.

Макет Святого Грааля

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

Гнучкий Святий Грааль

Все залишається цілим, оскільки ширина області перегляду змінюється за допомогою контейнера з рідиною.

Дивіться сітку CSS Pen - Holy Grail 2 від Geoff Graham (@geoffgraham) на CodePen.

Чуйний Святий Грааль

Щось нагромаджується, як тільки область перегляду звужується.

Дивіться Pen CSS Grid: Макет Святого Грааля - чуйний Джефф Грем (@geoffgraham) на CodePen.

2-стовпці з колонтитулом

Класичний макет блогу, де одна колонка призначена для публікації, а інша - бічної панелі.

Гнучкі 2-колонки

Макет стає млявим, коли область перегляду стає вузькою, але макет залишається на місці.

Дивіться Pen CSS Grid: Верхній колонтитул, нижній колонтитул з 2-колонкою (гнучкий) від Geoff Graham (@geoffgraham) на CodePen.

Адаптивні 2-стовпці

Речі складаються на менші екрани.

Дивіться Pen CSS Grid: Header, Footer with 2-Column (Responsive) від Geoff Graham (@geoffgraham) на CodePen.

Рівномірно розподілений, підходить за потребою

Елементи вливаються в макет і закінчуються, коли їх більше немає.

Дивіться сітку CSS Pen, рівномірно розподілену, стільки, скільки потрібно Джеффу Грем (@geoffgraham) на CodePen.

Стаття з проривом

Чудовий маленький фокус Тайлера Стіки, який дозволяє елементу вирватися з сітки. Рейчел Ендрю дає детальне пояснення того, як названі лінії сітки дозволяють це працювати.

Дивіться Pen CSS Grid: Article with Breakout від Geoff Graham (@geoffgraham) на CodePen.

Основний календар

Як і слід було очікувати, CSS Grid добре працює для сітки календаря.

Дивіться Pen CSS Grid: Calendar від Geoff Graham (@geoffgraham) на CodePen.

Монопольна рада

Простий відпочинок ігрової дошки. Джен Сіммонс має солодку демонстрацію в комплекті зі стилями Monpoly.

Дивіться Pen CSS Grid: Monopoly Board від Geoff Graham (@geoffgraham) на CodePen.

Наш навчальний партнер Frontend Masters

Потрібен тренінг з розвитку інтерфейсу?

Frontend Masters - найкраще місце для його отримання. Вони мають курси з усіх найважливіших інтерфейсних технологій, від React до CSS, від Vue до D3, а також за допомогою Node.js та Full Stack.