CSS Grid - Zadania

ZADANIE 1 – Zbuduj prostą siatkę 2×2

Polecenie:

Stwórz kontener siatki zawierający cztery elementy. Rozmieść je w układzie 2 kolumn i 2 wierszy.

Podpowiedź:

Użyj display: grid.

Liczbę kolumn określisz przez grid-template-columns.

Wiersze możesz zdefiniować przez grid-template-rows.

Wystarczy po dwie wartości w każdej właściwości.

Przykład rozwiązania:

ZADANIE 2 – Zastosuj jednostkę fr

Polecenie:

Stwórz układ 3 kolumn, gdzie:

pierwsza kolumna ma szerokość 1fr,

druga 2fr,

trzecia 1fr.

Dodaj trzy elementy.

Podpowiedź:

fr to jednostka elastyczna, która dzieli przestrzeń.

W grid-template-columns wpisz: 1fr 2fr 1fr.

Przykład rozwiązania:

ZADANIE 3 – Grid z automatycznymi wierszami

Polecenie:

Stwórz układ z 3 kolumnami. Dodaj 5 elementów.
Kolumny mają mieć 1fr, a wiersze mają mieć automatycznie wysokość 120px.

Podpowiedź:

Zastosuj grid-auto-rows: 120px.

Kolumny ustaw przez grid-template-columns: repeat(3, 1fr).

Elementów jest więcej niż miejsc w pierwszym wierszu – reszta przejdzie do kolejnego.

Przykład rozwiązania:

ZADANIE 4 – Połączenie komórek w Gridzie

Polecenie:

Stwórz siatkę 3×3.
Spraw, aby pierwszy element zajmował dwie kolumny, a reszta elementów zajmowała po 1 komórce.

Podpowiedź:

Użyj właściwości elementu: grid-column: 1 / span 2.

span 2 oznacza „zajmij dwie kolumny”.

Przykład rozwiązania:

ZADANIE 5 – Zaawansowane wyrównanie elementów (na ocenę 6)

Polecenie:

Stwórz siatkę 3×2.
Każdy element ma być wyrównany inaczej wewnątrz własnej komórki:

pierwszy – do góry,

drugi – do dołu,

trzeci – do lewej,

czwarty – do prawej,

piąty – pośrodku,

szósty – rozciągnięty.

Podpowiedź:

Użyj właściwości elementu:
align-self (góra/dół)
justify-self (lewo/prawo)

Dla rozciągnięcia użyj stretch.

Przykład rozwiązania: