Loading...

Какво е CSS Grid?

avatar Георги Кацаров 1 минута
Какво е CSS Grid?

В ранните дни на уебдизайна, през 90-те, дизайнерите не са имали възможността да постигнат прецизно и разчупено позициониране на различни елементи посредством html. С едно изключение, което не било предвидено за това – HTML таблиците. Таблиците били предназначени обаче за показване на данни в табличен вид, а не за определяне на изгледа на даден сайт. Въпреки това обаче те станали масово използвани именно за тази цел, просто защото не съществували други елементи, с които да се постигне търсената разчупеност в сайта. Въпреки това те имали редица недостатъци, най-вече по-отношение на изключителната трудност, с която можели да се ъпдейтват, както и излишната им усложненост. А когато мобилните технологии се включили в играта – HTML таблиците били безсилни да отговорят на новите нужди в дизайна. Появила се необходимостта от нов тип елементи.

Какво представлява CSS Grid-ът?

CSS Grid изгледът е похват в CSS-а, който позволява на разработчиците да създават сложни дизайни, оптимизирани за различните типове устройства (т.нар. „responsive дизайн“). Нещо повече – чрез CSS Grid можете да създавате разчупени responsive дизайни, които изглеждат идентично в различните браузъри. CSS Grid се поддържа от всички основни браузъри.

Посредством CSS Grid можете да създавате по-асиметрични изгледи, спрямо предходни опции за мрежи и изгледи, като CSS floats например, който има някои недостатъци по отношение на съдържанието, което позволява при определени условия да се наруши последователността/структурата на създадения изглед. CSS Grid има предимство и пред CSS Flexbox. Проблемът при Flexbox е, че е добро responsive решение при едноизмерни изгледи т.е. изглед който се разгръща само в една посока. Ако искате да създадете двузимерен т.е. изглед, който да се разгръща и в хоризонтална, и във вертикална посока едновременно, като в същото време е responsive – тогава ви трябва CSS Grid.

Ако искате да усвоите пълноценното прилагане на CSS Grid, както и други полезни умения, като работа със CSS препроцесори – не се колебайте, а запишете курса „CSS Advanced - юли 2019“. В него ще отправим по-задълбочен поглед към съвременния front-end дизайн и разработка. Очакваме ви!