Grid + RWD
Czy pamiętacie jeszcze media-queries? 🙂 Za ich pomocą możemy dopasowywać wygląd naszej strony do szerokości ekranu urządzenia, na której jest przeglądana. Dopasowywanie to wykonujemy poprzez nadpisywanie bądź dodawania nowych właściwości CSS w określonych przedziałach szerokości ekranu. W poprzednim temacie poznaliśmy jedną właściwość CSS, za pomocą której możemy zdefiniować layout całej strony – grid-template-areas.
Łącząc te dwie rzeczy: media query + CSS grid, otrzymamy niezwykle łatwy, szybki i przyjemny sposób na tworzenie responsywnych stron internetowych. Wszystko, co musimy zrobić to w zależności od rozmiaru ekranu zmieniać rozmiar siatki oraz rozmieszczone na niej obszary.
Powyższy layout będzie zachowywał się następująco:
Masz pytania lub uwagi?
Przejdź na Discord