Podczas tworzenia aplikacji internetowej jedną z pierwszych rzeczy, jakiej potrzebujesz, jest sposób na rozmieszczenie treści aplikacji.
Wielu projektantów używa wyimaginowanych siatek do układania treści, niezależnie od tego, czy jest to strona internetowa, czy aplikacja. Grupa CSS ciężko pracuje nad ułatwieniem tworzenia układów. W ramach tych działań powstał moduł układu siatki CSS, który jest teraz dostępny w przeglądarkach.
Ta funkcja jest dostępna do wypróbowania w Chrome za pomocą flagi eksperymentalnej. Jest ona też implementowana w IE od wersji 10 i prawdopodobnie wkrótce pojawi się w większości przeglądarek.
Podsumowanie
- Układ osi CSS pozwala definiować wiersze i kolumny układu
- Siatka może się dostosowywać do dostępnej przestrzeni
- kolejność treści może być niezależna od kolejności wyświetlania kontenera siatki;
- Układy mogą się zmieniać na podstawie zapytań o media, co ułatwia projektowanie elastyczne
- Treści mogą się nakładać (umożliwiając układ, który jest niemożliwy przy użyciu innych metod)
- Układ siatki jest szybki
Oto film, który objaśnia, jak działa CSS Grid Layout (slajdy:
Wypróbuj
Korzystanie z CSS Grid Layout w Chrome jest teraz bardzo proste. Najpierw musisz włączyć flagę eksperymentalną, aby aktywować tę funkcję.
Najpierw otwórz adres URL chrome://flags i przewiń w dół do opcji Włącz eksperymentalne funkcje platformy internetowej, jak pokazano na ilustracji:
Wystarczy, że klikniesz Włącz, aby włączyć flagę. Pojawi się wtedy taki komunikat:
Teraz wystarczy kliknąć przycisk Uruchom ponownie, aby ponownie uruchomić przeglądarkę. Po tym możesz już wypróbować układ siatki CSS.
Powiedz nam, co myślisz
CSS Grid Layout to świetny nowy element podstawowy dla treści internetowych, ale jak zwykle chętnie dowiemy się, co o nim myślą programiści. Istnieje wiele sposobów na przekazanie opinii – możesz zostawić komentarz tutaj, wysłać e-maila do listy grupy roboczej W3C CSS z tematem „[css-grid]”, zgłosić błąd lub napisać na blogu i wyrazić swoją opinię w twecie. Nie możemy się doczekać, aż zobaczymy świetne układy stworzone dzięki tej przydatnej nowej funkcji.