Це колекція початкових шаблонів для макетів і шаблонів із використанням 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.