CSS Grid: Model pracy z Gridem

0:00W css grid tak samo jak w flexboxie polegamy

0:05na relacji rodzić dziecko jeżeli dobrze rozumiesz

0:09flexboxa to nie powinieneś mieć większego problemu ze zrozumieniem css grida

0:13na elemencie który będzie naszym kontenerem wrapperem

0:17ustawiamy klasę css grid i wtedy wszystkie elementy

0:21które znajdują się bezpośrednio w tym elemencie html'owym

0:26będą grid itemami na samych grid itemach nie musimy

0:30ustawiać żadnych dodatkowych klas żadnych właściwości

0:34one dzieją się automatycznie czyli jeśli ustawimy na containerze

0:39display grid

0:43to wtedy wszystkie elementy container item

0:48czy tak naprawdę wszystkie elementy które znajdują się bezpośrednio wewnątrz tego

0:52elementu będą miały będą miały tryb renderowania ustawiony

0:56jako grid item nie ma takiej właściwości w css więc nie ma możliwości nawet

1:01ustalenia display grid item po prostu to się dzieje

1:05automatycznie i nie musimy o tym pamiętać to

1:09o czym musimy pamiętać to to że ustawiając na kontenerze

1:14właściwość display grid wszystkie elementy będą renderowane

1:19jako grid item tak samo jak we flexboxie mieliśmy flex

1:23itemy one miały swoje właściwości kontenery miały swoje właściwości w css grid

1:27jest dokładnie tak samo oczywiście możemy też zagnieżdżać

1:32nasze layouty czyli jeśli ustawimy sobie na elemencie

1:36numer 3 czyli item 3 display grid

1:40to również item 3 będzie miał tą

1:45właściwość to znaczy będzie zarówno kontenerem grida jak i

1:50dzieckiem grida o klasie kropka container jeśli

1:54dodamy teraz jakieś elementy do środka diva numer

1:583 tutaj skorzystamy z emmeta żeby troszkę nam ułatwił

2:03generowanie markup

2:07i powiedzmy że wygenerujemy

2:1110 elementów o klasie nested wtedy ten

2:16element jest zarówno grid itemem jak i kontenerem o

2:21klasie grid możemy teraz ustawić różne właściwości powiązane z css

2:25grid na przykład grid-template-columns i

2:31wpisać powiedzmy 5

2:36kolumn o szerokości 1fr czyli fractional unit

2:40i w tym momencie mamy kontener grida

2:46o klasie kropka container ale dziecko tego kontenera

2:50również jest grid containerem tak więc mamy możliwość zagnieżdżania

2:55css grid w sobie a już niedługo również będziemy mogli

2:59manipulować relacją między rodzicem a

3:03zagnieżdżonym grid containerem przy pomocy tak zwanego subgrida o

3:07którym dowiesz się pod koniec tego kursu wiedząc to wszystko możemy

3:11przejść do faktycznej nauki css-grid zapraszam do następnej lekcji