Grid Layout – przyszłość w tworzeniu stron internetowych


11 sierpnia 2012 / Mr.Mr


Były takie czasy kiedy tabelke kojarzono z trzonem layoutu strony internetowej. Czasy te jednak minęły bezpowrotnie. Współcześnie dominującym typem layoutu jest strona internetowa „na divach”, czyli model, w którym wykorzystuje się elementy blokowe div i właściwość float aby stworzyć kontenery dla treści i grafik przedstawianych na naszej witrynie.

Niestety nie jest to model doskonały. Aby nadąrzyć za trendami w projektowaniu trzeba często sięgać po pozycjonowanie absolutne lub relatywne. Sam model strony „na divach” posiada również liczne wady jak chociażby częstą konieczność drobiazgowego kalkulowania dostępnej przestrzeni.

Dodatkowo znane html5 tagi <header>, <article> itp. nie pomagają w tym aspekcie, jako że same pozostaję częścią treści dokumentu (kodu html). Co więc nam pozostaje? Spójrzmy na to co przygotowuje dla nas W3C.

display:grid;

W3C w Editor’s Draft z 2.08.2012 pokazuje jak pewnie wyglądać będzie przyszłość tworzenia stron www.

Grid Layout contains features targeted at web application authors. The Grid can be used to achieve many different layouts. It excels at dividing up space for major regions of an application, or defining the relationship in terms of size, position, and layer between parts of a control built from HTML primitives.

Like tables, the Grid enables an author to align elements into columns and rows, but unlike tables, the Grid doesn’t have content structure, and thus enables a wide variety of layouts not possible with tables. For example, the children of the Grid can position themselves with Grid lines such that they overlap and layer similar to positioned elements.

W skrócie tzw. grid layout pozwala nam dzielić przestrzeń strony internetowej w sposób podobny do tego jaki oferują tabele, ale będąc częścią naszego arkusza stylów staje się elementem bardziej dynamicznym i elastycznym niż html’owa tabela. Nie dość, że możemy „szatkować” naszą stronę do woli tworząc skomplikowane układy kontenerów dla treści to jeszcze wszystko to dzieje się z poziomu pliku css!

Mając takie narzędzie pod ręką nic nie stoi na przeszkodzie by rozbudowywać je o inne techniki i narzędzia (np. przez dodanie @media możemy tworzyć responsywne layouty stron www). Bez wątpienia potęga drzemiąca w grid layout jest niesamowita.

Dodatkowo elastyczność grid’u wynika też z jego własnych właściwości. Podział rozmiarów dzieje się dynamicznie i dostosowuje się do dostępnej przestrzeni.

Samo wprowadzenie grid layout jest banalnie proste. W naszym akruszu stylów musimy stworzyć element, który stanie sie funadamentem układu strony i dopisać:

lub:

Proste? Tak. Dalej sprawy są bardziej skomplikowane.

Przykład kodu (W3C)

Jak widać początek jest dość prosty, czyli deklarujemy „display:grid” dla wybranego elementu. Dalsza część kodu jest pewnie mniej zrozumiała, ale wynika to głównie z tego że mamy do czynienia z czymś nowym. Powyższy fragment kodu pochodzi z dokumentu W3C i jest dostosowany do przykładu w nim podanego, ale dla nas jest istotny tylko po to aby opisać kilka podstawowych dostępnych opcji.

Grid element

To jakby kontener dla naszego layoutu. Odwołując się do powyższego, przykładowego kodu grid elementem będzie id grid, któremu nadaliśmy właściwośc „display:grid”, która to sprawia, iż jego dzieci stają się grid items i mogą być pozycjonowane wewnątrz swojego rodzica. W założeniu przypomina to trochę (ale nie dosłownie) absolutne pozycjonowanie elementów wewnątrz innego elementu pozycjonowanego absolutnie.

Grid tracks

Tutaj mamy do czynienia z elementami przypominającymi kolumny i rzędy tabel. Określając je tak na prawdę podajemy po prostu wielkości. ich deklaracja następuja w tzw. grid element.

Grid lines

To pionowe i poziome linie istniejące między kolumnami i rzędami. Grid items wykorzystują je do ustalenia swojej pozycji i dostępnej przestrzeni. Dzieję się to przez odniesienie do właściwości grid-row i grid-column.

Grid areas

Mamy tutaj do czynienia z przestrzenią wykorzystywaną do wyświetlenia minimum jednego grid item. Mogą one być określane wprost przy użyciu właściwości grid-template lub poniekąd pośrednio przez deklarowanie pewnego elementu przestrzeni layoutu za pomocą grid-row i grid-column okreslonego w grid item.

Grid items

Jak już wspomnieliśmy wcześniej grid items do dzieci grid element. Tworzą one jakby własny poziom layoutu umożliwiający manipulacje z poziomu arkusza stylów. Przykład poniżej:

Wyraźnie mamy tutaj do czynienia z pisaniem zupelnie nowej historii css’a. Przyszłość tworzy się na naszych oczach i chyba warto zapoznać sie z całością dokuemntu W3C CSS Grid Layout Editor’s Draft, 2 August 2012, na podstawie którego napisano powyższy artykuł i z którego pochodzą przykłady kodu.



2 odpowiedzi na “Grid Layout – przyszłość w tworzeniu stron internetowych”

  1. VonSNAKE pisze:

    Co oznacza 1fr, bo mogę się domyślać ale niestety nic nie łapie bez tego ;(

    • Mr.Mr pisze:

      Cytując Editor Draft:

      „Fraction values are new units applicable
      to the ‘grid-definition-rows’ and ‘grid-definition-columns’ properties:

      fr

      Fraction of available space.

      The distribution of fractional space occurs after all ‘length’ or content-based row
      and column sizes have reached their maximum. The total size of the rows
      or columns is then subtracted from the available space and the remainder
      is divided proportionately among the fractional rows and columns.”

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.