Grid layout - praktyczny tutorial CSS dla początkujących!

👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈
🎤 Discord:   / discord   🎤
🔥 Zapisz się do grupy na FB:   / 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