Rewolucja w świecie projektowania – CSS Grid

R

Gdyby projektant jeszcze rok temu powiedział mi, że chce mieć inny layout w zależności od szarpnięcia krawędzią okna przeglądarki to popukałbym się mocno w czoło… Przyszłość stała się rzeczywistością, która dała nam CSS Grid. Ostatnio wpadłem na genialną prezentację Mortena, która w prosty sposób tłumaczy czym właściwie CSS Grid jest.

CSS Grid wraca do korzeni internetu, gdzie 15 lat temu także projektowano myśląc o stronie „tabelowo”. Cały układ dzielimy na tabelę, w każdą komórkę, bądź ich zbiór wrzucamy moduł i viola! Rozstajemy się z Bootstrapem, Foundation i innymi wynalazkami do responsywności. W prosty sposób możemy żonglować rozmieszczeniem modułów w czystym css. Żadnych sztuczek w javascript!

Czy mogę tego używać na produkcji?

Zgodnie z raportem caniuse.com, CSS Grid pokrywa 70% wsparcia przeglądarek użytkowników. Decyzja zależy od targetu waszej aplikacji, jeśli chcecie dotrzeć do jak największej liczby użytkowników, radziłbym jeszcze trochę poczekać. Aczkolwiek wskaźnik dosyć szybko leci do góry. W dniu, w którym zapoznałem się z CSS Gridem, globalne wsparcie oscylowało w granicach 68%. Tydzień później – w dniu publikacji tego wpisu – mamy już 71,28%.

Czy mogę używać CSS Grid?

Podsumowując

Osobiście css grid jest moim faworytem jeśli chodzi o tworzenie responsywnych stron. Mój kolejny projekt na bank będzie oparty właście o tą technologię(jeśli masz fajny pomysł na projekt i szukasz programisty, daj znać, chętnie dołączam do projektów). Największym plusem, który widzę jest szybsze tworzenie responsywnych layoutów, odejście od używania frameworków, które i tak w większych projektach służą jedynie do grida, nowe możliwości w projektowaniu samych layoutów oraz odciążenie przeglądarki użytkownika robiąc kosmiczne obliczenia javascriptem by coś ukryć, przesunąć czy pokazać. Dzięki css grid, w bardzo prosty sposób jesteśmy w stanie zrobić te 3 responsywne widoki dosłownie kilkunastoma linijkami kodu.

CSS Grid różne layouty
© smashingmagazine.com

Na sam koniec, jeśli dalej zastanawiacie się nad css grid, przygotowałem dla was małe live demo.

https://demo.devbay.pl/css-grid/
https://demo.devbay.pl/css-grid/style.css

Złapcie za krawędź przeglądarki i poruszajcie nią. Progi łamania layoutu są ustawione na 600px, 768px. Na wersji mobile zwróccie uwagę gdzie ląduje footer. Zero javascript. Tylko i wyłącznie czysty css bez żadnych frameworków.

Kod, który tym steruje nie jest skomplikowany, rzekłbym nawet, że wizualnie możemy zmienić układ strony definiując tylko kolumny w samym css. Dla tych, którzy chcą szybko przyswoić css grid, polecam tą mini grę.

Jakie jest wasze zdanie? Widzicie jakieś zagrożenia związane z tą technologią?
Koniecznie dajcie znać w komentarzu!

O autorze

Filip Nowacki

Swoją przygodę z IT rozpoczął mając 13 lat, kiedy to stworzył swoją pierwszą stronę internetową. Obecnie pracuje jako backend & mobile developer, rozwijając kilka ogólnopolskich produktów o zasięgu blisko 15 milionów użytkowników. Prywatnie maniak optymalizacji, testów A/B, motoryzacji i architektury aplikacji.

3 komentarze

Your sidebar area is currently empty. Hurry up and add some widgets.