Grid jest to siatka, na bazie której w łatwy sposób może zbudować responsywną stronę internetową. Projektowanie zawartości strony na siatce jest bardzo wygodne, a nowoczesne Frameworki takie jak Bootstrap czy Foundation sprawiają, że budowanie strony od zera wyłącznie z wykorzystaniem HTML i CSS staje się dużo bardziej czasochłonne i mało wydajne. Frameworki to nie tylko wspomniana siatka, ale również masa dodatków m.in: MENU, przyciski, tabele, a nawet animacje.

W tym artykule skupię się jednak na podstawie czyli na budowie Grid’a dla dwóch bardzo popularnych Frameworków: Bootstrap i Foundation. W obu Frameworkach szerokość okna dzielona jest na 12 kolumn.

Klasy CSS dla Bootstrapa:

  • .col-xs-12 (szerokość auto)
  • .col-sm-12 (szerokość 750px)
  • .col-md-12 (szerokość 970px)
  • .col-lg-12 (szerokość 1170px)

w miejsce ledwo widocznego koloru żółtego należy wpisać cyfrę jak w poniższym przykładzie. Tyle będzie kolumn ile dla danej wielkości okna wpiszemy pamiętając, że suma szerokości wynosi 12. Przykładowo chcąc dwie kolumny dla największych ekranów wpiszemy klasę .col-lg-6 .col-lg-6 co znaczy, że będą to dwie kolumny o równej szerokości.


<div class="container">
    <div class="row">
        <div class="col-lg-3 text-center">.col-lg-3</div>
        <div class="col-lg-3 text-center">.col-lg-3</div>
        <div class="col-lg-3 text-center">.col-lg-3</div>
        <div class="col-lg-3 text-center">.col-lg-3</div>
    </div>
    <div class="row">
        <div class="col-md-4 text-center">.col-md-4</div>
        <div class="col-md-4 text-center">.col-md-4</div>
        <div class="col-md-4 text-center">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center">.col-sm-6</div>
        <div class="col-sm-6 text-center">.col-sm-6</div>
    </div>
    <div class="row">
        <div class="col-xs-12 text-center">.col-xs-12</div>
    </div>
</div>

Standardowo szerokość dla najszerszego okna to 1170px. Jeżeli chcemy, żeby okno zajęło 100% okna to dodajemy klasę: .container-fluid . Efekt całości kodu widać poniżej. Pierwsze 4 wiersze to powyższy kod, a ostatni rozciągnięty wiersz to kod poniżej. Dzięki takiemu zapisowi poszczególnych klas w zależności od wielkości okna liczba kolumn na stronie będzie się zmieniać.


<div class="container-fluid" style="margin-top:50px;">
    <div class="row">
        <div class="col-lg-6 text-center">.col-lg-6</div>
        <div class="col-lg-6 text-center">.col-lg-6</div>
    </div>
</div>

bootstrap - class
Warto również znać klasy Bootstrapa, które niektóre kolumny potrafią ukryć lub pokazać przy zmianie rozmiaru przeglądarki. Dzięki temu dla okna o dużej szerokości możemy dać więcej treści, którą oszczędzimy osobie, która weszła na stronę np. z komórki. Poniżej klasy ukrywające kolumny, a w nawiasach ich odpowiedniki, które pokazują zawartość:

  • .hidden-xs (.visible-xs-*)
  • .hidden-sm (.visible-sm-*)
  • .hidden-md (.visible-md-*)
  • .hidden-lg (.visible-lg-*)

Podobnie sytuacja wygląda z Foundation tutaj klasy, są zapisane inaczej ale zasada jest ta sama i suma kolumn również musi wynieść 12. Podobnie jak w Bootstrapie w celu uzyskania 100% szerokości okna należy użyć osobnej klasy. W Foundation jest to .expanded .

Klasy CSS dla Foundation:

  • .large-12 columns
  • .medium-12 columns
  • .small-12 columns

    <div class="row">
        <div class="large-3 columns text-center">.large-3 columns</div>
        <div class="large-3 columns text-center">.large-3 columns</div>
        <div class="large-3 columns text-center">.large-3 columns</div>
        <div class="large-3 columns text-center">.large-3 columns</div>
    </div>
    <div class="row">
        <div class="medium-4 columns text-center">.medium-4 columns</div>
        <div class="medium-4 columns text-center">.medium-4 columns</div>
        <div class="medium-4 columns text-center">.medium-4 columns</div>
    </div>
    <div class="row">
        <div class="small-6 columns text-center">.small-6 columns</div>
        <div class="small-6 columns text-center">.small-6 columns</div>
    </div>
<div class="expanded row" style="margin-top:50px;">
         <div class="large-6 columns text-center">.large-6 columns</div>
        <div class="large-6 columns text-center">.large-6 columns</div>
</div>

 

foundation - class

I jeszcze podobnie jak było w Bootstrapie pokazywanie oraz ukrywanie kolumn w zależności od zmiany szerokości okna przeglądarki w Foundation odbywa się poniższymi klasami:

  • .show-for-small-only (.hide-for-small-only)
  • .show-for-medium-up (.hide-for-medium-up)
  • .show-for-medium-only (.hide-for-medium-only)
  • .show-for-large-up (.hide-for-large-up)
  • .show-for-large-only (.hide-for-large-only)
  • .show-for-xlarge-up (.hide-for-xlarge-up)
  • .show-for-xlarge-only (.hide-for-xlarge-only)
  • .show-for-xxlarge-up (.hide-for-xxlarge-up)

Więcej o tych Frameworkach przeczytasz na poniższych stronach, gdzie znajduje się bardzo bogata dokumentacja: