Grid layout - praktyczny tutorial CSS dla początkujących!
👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈
🎤 Discord: https://discord.gg/q88RUeTHbU 🎤
🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥
Gra Grid Garden:
https://cssgridgarden.com/
Codpen z prostym przykładem:
https://codepen.io/Felicjan/pen/popeZqx
00:00 Intro
02:06 Czym jest grid?
09:58 Grid w devtools
11:17 Grid container i grid items
20:05 Grid span
22:25 Grid column
24:20 Grid row
27:39 Grid area
30:25 Grid order
32:36 Grid template
35:31 Fractions
Pozycjonowanie elementów na stronie to jedna z największych zmór osób, które zaczynają przygodę z Frotndem. Początkowo CSS nie dawał zbyt wielu możliwości na przyjemne i skalowalne tworzenie layoutów stron, jednak w odpowiedzi na potrzeby rynku powstał flexbox i grid - mechanizmy, które dają osobom tworzącym strony zupełnie nowy arsenał do walki z bardziej skomplikowanymi designami i wymaganiami klientów. Nagraliśmy filmik, w którym gram w świetną gierkę Grid Garden, która uczy grida przez rozwiązywanie zadań. Staram się wyjaśnić zagwozdki, które sprawiały mi problem, gdy sam uczyłem się grida i które obserwuję u osób, które po raz pierwszy próbują swoich sił z tym mechanizmem. Mam nadzieję, że nauczycie się czegoś ciekawego :) Miłego oglądania!
Filip Mamcarczyk
Kacper Sokołowski
Chcesz więcej? Sprawdź w oryginale!
Przejdź do filmu