CSS Grid площадка

За CSS Grid площадка

Плейграундът за CSS Grid композира реални мрежови оформления визуално. Добавяйте и премахвайте колонни и редови писти, за да оформите grid-template-columns и grid-template-rows, задайте разстоянията между колони и редове и настройте всичките четири свойства за подравняване — justify-items, align-items, justify-content и align-content — докато прегледът отразява всяка промяна мигновено.

Позиционирането на елементи е там, където мрежите стават мощни: добавете елементи, кликнете един в прегледа, за да го изберете, и го позиционирайте с начало на колона, обхват на колона, начало на ред и обхват на ред. Така се изграждат странични ленти, хедъри и функционални клетки, обхващащи множество писти — техниката зад почти всяко реално мрежово оформление.

Три шаблона — holy grail, dashboard и gallery — зареждат класически структури на страници, които можете да разгледате и адаптирате. Когато оформлението е правилно, копирайте генерирания CSS, съдържащ пълните правила на мрежовия контейнер и позиционирането на всеки елемент.

Как да използвате CSS Grid площадка

1. Добавете или премахнете колонни и редови писти, за да определите мрежовия шаблон.
2. Задайте разстоянието между колони и разстоянието между редове.
3. Коригирайте контролите за подравняване: justify-items, align-items, justify-content и align-content.
4. Добавете елементи, кликнете един в прегледа и задайте началото и обхвата на колона/ред, за да го позиционирате.
5. Заредете шаблона holy grail, dashboard или gallery, за да изучите класическо оформление.
6. Копирайте генерирания CSS в стиловата ви таблица.

Често задавани въпроси