CSS Grid Starter Layouts - CSS-трикове

Това е колекция от начални шаблони за оформления и модели, използващи CSS Grid. Идеята тук е да покаже какво е способна да направи техниката и да осигури отправна точка, която може да бъде преназначена за други проекти.

Не забравяйте, че поддръжката на браузъра за Grid е добра, но изисква резервни копия за стари браузъри. Това означава, че изправеното копиране и поставяне може да не е подходящо за някои случаи на употреба.

Оформление на Светия Граал

Класическото оформление с три колони, където две странични ленти и контейнер, съдържащ копието на тялото, са поместени между заглавката и долния колонтитул с пълна ширина.

Гъвкав Свещен Граал

Всичко остава непокътнато, тъй като ширината на прозореца за промяна се променя с помощта на контейнер за течно съдържание.

Вижте Pen CSS Grid - Holy Grail 2 от Geoff Graham (@geoffgraham) на CodePen.

Отзивчив Свещен Граал

Нещата се подреждат, след като видимостта се стесни.

Вижте Pen CSS Grid: Layout Holy Grail - Responsive by Geoff Graham (@geoffgraham) на CodePen.

2-колони с горен и долен колонтитул

Класическо оформление на блога, където едната колона е за публикацията, а другата за страничната лента.

Гъвкави 2-колони

Оформлението става гъвкаво, когато прозорецът за видимост се стесни, но оформлението остава на място.

Вижте Pen CSS Grid: Header, Footer with 2-Column (Гъвкав) от Geoff Graham (@geoffgraham) на CodePen.

Отзивчиви 2-колони

Нещата се подреждат на по-малки екрани.

Вижте Pen CSS Grid: Header, Footer with 2-Column (Responsive) от Geoff Graham (@geoffgraham) в CodePen.

Равномерно разпределени, годни според нуждите

Елементите се вливат в оформлението и завършват, когато вече няма.

Вижте мрежата за писане CSS, разпределена равномерно, колкото са необходими от Джеф Греъм (@geoffgraham) в CodePen.

Статия с пробив

Страхотен малък трик на Тайлър Стика, който позволява на елемент да излезе от мрежата. Рейчъл Андрю предоставя задълбочено обяснение за това как именуваните решетъчни линии позволяват това да работи.

Вижте Pen CSS Grid: Article with Breakout от Geoff Graham (@geoffgraham) на CodePen.

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

Както може да се очаква, CSS Grid работи добре за календарна мрежа.

Вижте Pen CSS Grid: Календар от Geoff Graham (@geoffgraham) на CodePen.

Монополна дъска

Прост отдих на игралната дъска. Jen Simmons има сладка демонстрация, пълна със стилове на Monpoly.

Вижте Pen CSS Grid: Monopoly Board от Geoff Graham (@geoffgraham) на CodePen.

Нашият партньор за обучение Frontend Masters

Нуждаете се от обучение за развитие отпред?

Frontend Masters е най-доброто място да го получите. Те имат курсове по всички най-важни предни технологии, от React до CSS, от Vue до D3 и след това с Node.js и Full Stack.