KATEGORIA:

CSS Grid Layout – wprowadzenie

css grid

CSS GRID Layout – wprowadzenie

Grid to sposób tworzenia (budowania, składania) stron internetowych – drugie obok Flexboxa potężne narzędzie, ułatwiające pracę. CSS Grid Layout to układ dwuwymiarowy, tak jak tabele obsługuje kolumny i wiersze. W dużym kontenerze (Grid container) umieszcza się elementy potomne (Grid items) – po dodaniu odpowiednich cech w css, można stworzyć zaawansowany układ, a po dodaniu odpowiednich @media układ stanie się responsywny.

Flexbox stworzony został do prostszych układów jednowymiarowych – przy zaawansowanych witrynach i przede wszystkim wielowymiarowych zaleca się używanie CSS Grid Layout. Dzięki niemu możemy zapomnieć o: inline, block, flat, left, right, position, absolute itp. i w sposób intuicyjny i dużo szybszy niż klasyczny – tworzyć layout stron internetowych.

Zachęcam do obejrzenia filmu “Morten Rand-Hendriksen: CSS Grid Changes Everything” – bardzo dobre wprowadzenie do tematu! 🙂

GRID – podstawy

Grid-container

Grid-container to element główny, w którym znajdują się elementy potomne. Jemu przypisujemy cechę display: grid i od tego zaczynamy całą pracę. W kodzie poniżej grid-container to div class="container"

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>

Grid-item

grid-item to elementy potomne grid-containera. Znajdują się bezpośrednio pod nim, w poniższym przykładzie są to wszystkie divy o klasie item. Natomiast h2 to już nie jest grid-item.

<div class="container">
  <div class="item item1">
	  <h2> TITLE </h2>
  </div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>

Grid-line

grid-line to linia siatki. Jak już wspomniałam będziemy tworzyć swoistą tabelę. Tabela będzie podzielona liniami poziomymi i pionowymi. Każda z tych linii to grid-line.

grid-line

Grid-track

grid-track to przestrzeń między dwiema liniami siatki – zarówno w pionie jak i w poziomie. Mówiąc prościej: kolumny lub wiersze.

grid-track

grid-track

Grid-cell

Jest to przestrzeń między dwiema liniami pionowymi i dwiema poziomymi, czyli komórka.

grid-cell

Grid-area

Na koniec grid-area czyli obszar składający się z dowolnej liczby grid-cell. Obszar leży pomiędzy czterema liniami siatki.

grid-area

Podsumowanie

Z takimi podstawami można już spokojnie zabrać się za projektowanie layoutu za pomocą CSS Grid. W kolejnym wpisie prezentuję po kolei właściwości grid-containeraWłaściwości grid-container.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *