CSS Grid — CSS — kod. pyk

Grid sprawdza się do układania elementów w wierszach i kolumnach.

Jak to działa?

grid-template-columns opisuje kolumny. minmax() i repeat() pomagają tworzyć elastyczne siatki.

Przykład 1 — poznaj zapis

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

Powstanie siatka dwóch równych kolumn.

Przeczytaj kod linijka po linijce

.cards {Wybieramy elementy, które mają otrzymać podane style.
display: grid;Ustawiamy sposób rozmieszczania elementów.
grid-template-columns: repeat(2, minmax(0, 1fr));Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Dwie kolumny kart z odstępami.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

Wynik drugiego przykładupo uruchomieniu przykładu

Trzy równe kolumny z odstępami.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Zmień układ na trzy kolumny przy większej szerokości.