Znajdź się w siatce CSS

Alex Danilo

Jedną z pierwszych rzeczy, które musisz zrobić przy tworzeniu aplikacji internetowej, jest sposób określenia jej zawartości.

Wielu grafików używa wymyślonych siatek do układania treści, niezależnie od tego, czy chodzi o witrynę czy aplikację. Zespół usług porównywania cen pracuje nad uproszczeniem układów i w ramach tych działań stworzył moduł układu siatki CSS, który jest teraz dostępny w przeglądarkach.

Ta funkcja jest dostępna do wypróbowania w Chrome, ale dostępna jest flaga eksperymentalna. Jest również zaimplementowany w IE od wersji 10, a wkrótce pojawi się w większości przeglądarek.

Podsumowanie

  • CSS Układ siatki pozwala definiować wiersze i kolumny w układzie
  • Siatki mogą się dostosowywać, aby wykorzystać dostępne miejsce
  • Kolejność treści może być niezależna od kolejności wyświetlania kontenera siatki
  • Układy mogą się zmieniać w zależności od zapytań o multimedia, co ułatwia elastyczne projektowanie.
  • Treści mogą się nakładać (włączanie układu, które jest niemożliwe w przypadku innych metod)
  • Układ siatki jest szybki

Oto film z omówieniem, który dokładnie wyjaśnia sposób działania układu siatki CSS (slajdy znajdziesz tutaj:

Wypróbuj

Korzystanie z CSS Layouts w Chrome jest teraz łatwiejsze. Najpierw musisz włączyć flagę eksperymentu, aby włączyć tę funkcję.

Najpierw otwórz adres URL chrome://flags i przewiń w dół do opcji Włącz eksperymentalne funkcje platformy internetowej, jak pokazano poniżej:

Obraz przedstawiający opcję flagi eksperymentalnej

Po prostu kliknij Włącz, aby włączyć flagę. Wyświetli się prośba o ponowne uruchomienie przeglądarki, która wygląda tak:

Obraz przycisku ponownego uruchomienia

Teraz wystarczy kliknąć przycisk Uruchom ponownie teraz, aby zrestartować przeglądarkę, i wypróbować układ siatki CSS.

Powiedz nam, co myślisz

CSS Układ siatki to świetny nowy element bazowy dla treści internetowych, ale jak zwykle jesteśmy ciekawi, co myślą o nim programiści. Istnieje wiele sposobów na przekazanie opinii – wystarczy tu wpisać komentarz, wysłać e-maila do listy Roboczy grupy W3C CSS z hasłem „[css-grid]” w temacie, zgłosić błędy albo napisać na blogu, co o tym sądzisz. Nie możemy się doczekać, by zobaczyć świetne układy, które utworzysz za pomocą tej niezwykle przydatnej nowej funkcji.