Warsztat CSS: siatka wyświetlania

Przykład siatki elementów deklarując rozmiar siatki i rozmiar elementów. Zastosowanie:

• Dynamiczna, zmienna liczba elementów
• Nieznana lub bardzo duża liczba elementów

Poniższe reguły CSS należy zastosować do kontenera.

Reguły CSS (wersja A)

display: grid;
grid-template-columns: 30px 30px 30px 30px;
grid-template-rows: 32px 32px 32px;

Można zastosować automatyzację, w przypadku gdy kolumny są tej samej szerokości lub wiersze są tej samej wysokości. Należy użyć funkcji powtórz: repeat(ILE_RAZY,ROZMIAR)

Reguły CSS (wersja B)

display: grid;
grid-template-columns: repeat(4,30px);
grid-template-rows: repeat(3,32px);

BRAK reguł CSS dla elementów kontenera.

Przykład, gdzie elementy nakładane są na obszary siatki. Zastosowanie:

• Mała lub stała liczba elementów
• Stały układ wyświetlania z ustalonymi obszarami
• Elementy mogą zmieniać miejsca w przyszłości

Reguły CSS

Poniższe reguły CSS należy zastosować do kontenera wskazując jak będą nazywać się jego obszary:

display: grid;
grid-template-areas:
  "head head"
  "aside body"
  "foot foot"
;

Poniższe reguły CSS należy zastosować do konkretnego elementu znajdującego się w kontenerze wskazując jego przynależność do obszaru:

.top { grid-area: head; }
.side { grid-area: aside; }
.content { grid-area: body; }
.bottom { grid-area: foot; }

Elementy układane są na podstawie krawędzi siatki. Zastosowanie:

• Zasady jak w Grid#2
• Zamiast nazwanych obszarów może istnieć potrzeba określania położenia elementów po kolumnach i wierszach
• Możliwość nie-zapełniania całego obszaru, gdyby nawet był on nazwany - większa precyzja (widoczny czerwony fragment)

Reguły CSS

Poniższe reguły CSS należy zastosować do kontenera:

display: grid;
background-color: red; /* do demonstracji przykładu */

Poniższe reguły CSS należy zastosować do konkretnego elementu znajdującego się w kontenerze.

Pamiętaj, że dla reguł grid-column i -row wartości liczymy po krawędziach (kolumn lub wierszy) wg. zapisu: POCZĄTEK / KONIEC

div { background-color: white; text-align: center; }
.top { grid-column: 1/4; grid-row: 1/2; }
.side { grid-column: 1/2; grid-row: 2/3; }
.content { grid-column: 2/3; grid-row: 2/3; }
.bottom { grid-column: 1/4; grid-row: 3/4; }

Aby zobaczyć podgląd układu wyświetlania Grid (obszarów lub linii krawędziowych kolumn i wierszy) należy włączyć Narzędzia deweloperskie Przeglądarki internetowej.

1. Włącz narzędzia deweloperskie przyciskiem F12 lub prawym przyciskiem myszy i wybierz Zbadaj

2. Na zakładce Elementy/Inspektor wybierz węzeł z układem Grid

3. Na zakładce Reguły lub Układ należy aktywować wyświetlanie podgladu Siatki dla wybranego węzła

4. Najlepiej zaznaczyć (włączyć) ustawienia wyświetlania siatki, tj.: Numery wierszy oraz Nazwy obszarów