CSS grid i przyszłe układy siatek – ogólna dyskusja, przypuszczenia, pomysły

Question

Zastanawiałem się, gdzie przyjść z tym pytaniem i stwierdziłem, że może tutaj wywiąże się ciekawa dyskusja. Nie będę ukrywał, że chciałbym poczytać opinie ludzi z większym doświadczeniem, więc jeśli jesteś taką osobą to serdecznie zapraszam do dyskusji :)

Niedawno z ciekawości zainteresowałem się CSS grid. Trochę poczytałem, pobawiłem się, obejrzałem filmiki prezentujące podstawowe działanie i zastanawiam się jak może wyglądać tworzenie układów stron w niedalekiej przyszłości. Oczywiście zakładamy podejście mobile first wraz z maksymalnym ograniczeniem potrzebnych stylów dla wersji mobilnej. Dopiero po przekroczeniu odpowiednich warunków, zmieniamy layout. Zasadniczo w tej kwestii mam pytanie, ponieważ na jednym filmie demonstrującym działanie grida, autor dla wersji podstawowej (mobilnej) już uruchamiał go z 1 kolumną. Przypuszczam, że chodziło o zaprezentowanie działania samego grida i jego funkcjonalności, ale sprawiło to, że zacząłem się zastanawiać nad koniecznością takiego rozwiązania.

I tutaj pojawia się jedno z wielu pytań: czy faktycznie jest sens ustawiać grid dla wersji z układem 1 kolumnowym (mobilny) skoro domyślnie układy blokowe dają nam 1 kolumnę i są w pewien sposób elastyczne?

No właśnie. Czy jest sens/jest to konieczne w przypadku, gdy nie chcemy zmieniać wizualnej kolejności sekcji strony (przypominam grid na taką opcję)?

Pierwsza moja myśl była taka, że najpierw tworzymy podstawową mobilną stronę bez grida, która zadziała na urządzeniach mobilnych i awaryjnie w starszych przeglądarkach. Po przekroczeniu odpowiedniej granicy z pomocą @media queries, aktywujemy grida i bawimy się w rozmieszczanie elementów. Wydaje mi się, że takie podejście jest całkiem dobre, ponieważ w pewien sposób sprawimy, że strona będzie prezentowała się dobrze nawet na przestarzałych wersjach IE – wyświetlona zostanie bowiem wersja mobilna (powiedzmy w wycentrowanym kontenerze z ustaloną szerokością dla większych rozdzielczości). Z drugiej jednak strony nawet jeśli ustawimy od początku grida to przecież niewspierające go przeglądarki zwyczajnie pominą właściwości i tym samym również otrzymamy standardowy układ blokowy. Nie chcę wchodzić w jakieś zaawansowane wsparcie dla nierozwijanego już oprogramowania, ale w przypadku internetu kompatybilność z wcześniejszymi rozwiązaniami/narzędziami jest spotykana (jeśli się mylę proszę o poprawienie).

Co o tym wszystkim myślicie? Jak waszym zdaniem będzie tworzyć się layout? Czy do historii przejdą siatki typu Bootstrap, Foundation? A może CSS grid nie będzie tak często i chętnie wykorzystywany?

Answer 1

CSS grid w przeglądarkach został dodany do Chrome bodajże w marcu, a chyba nadal nie jest w pełni wdrożony w przeglądarkach- co za tym idzie jest nową technologią. Sam od niedawna zacząłem z niego korzystać i muszę przyznać że daje ogromne możliwości- jest przede wszystkim bardziej elastyczny. Mogę się założyć, że w następnych latach będzie jego niesamowita ekspansja.

Co do media queries + grid- osobiście przestałem to łączyć, bo definiując grid-template-columns i rows możesz użyć funkcji minmax(wartość, wartość)- która tak na prawdę według mnie wystarcza.