CSS Grid: Wszystkie właściwości i notacje skrócone

0:00Cześć w tej lekcji omówimy pokrótce wszystkie właściwości css grida

0:04skorzystamy do tego ze strony css reference kropka io no

0:08i tutaj mamy sekcję poświęconą konkretnie gridowi jedną

0:13właściwością jest grid area i grid area pozwala

0:17nam na ustawienie elementów na naszej siatce w określonym

0:22miejscu czy jeśli zadeklarowalibyśmy sobie pomocą grid-template-columns że

0:26to ma być header header header tutaj content i tutaj sidebar

0:30no to ustawiając grid-area na nazwę na przykład header nasz

0:34element pojedynczy element html rozciągnie się na te trzy kolumny czy

0:39jeśli damy content no to w tym momencie na dwie i sidebar tutaj na

0:43tą jedną bez pierwszego wiersza domyślnie jest to wartość auto

0:47czyli jeśli niektóre elementy nie będą miały

0:51ustawione grid-area czyli na przykład stworzymy sobie element

0:56header element content ale elementu sidebar nie stworzymy nie nadamy tutaj

1:00grid-area sidebar no to ten element zostanie automatycznie tutaj umieszczony

1:05ale może to faktycznie powodować różne problemy przy tworzeniu responsywnych

1:09layoutów na przykład wersji mobilnych danej witryny z czym też spotkaliśmy się już w poprzednich

1:14lekcjach z tego kursu grid-auto-columns działa tak samo jak grid-auto-rows

1:18czyli pozwala na generowanie dodatkowych kolumn w

1:23momencie kiedy nie zadeklarujemy ich jawnie poprzez explicit grid

1:27warto zaznaczyć że grid-auto-columns zadziała tylko wtedy jeśli ustawimy

1:32grid-auto-flow na column wtedy elementy nadmiarowe tak

1:36jak tutaj stworzyliśmy header header header sidebar main main zostaną

1:41dodane tutaj w wolne miejsce na stronie z grid-auto-columns będziemy

1:45jeszcze korzystali w przykładzie gdzie będziemy tworzyli własną tablicę

1:50trello na podstawie grida nie będziemy jej kolorować natomiast będziemy tworzyli

1:54schemat taki jak na trello grid-auto-flow pozwala

1:58nam na zmianę sposobu renderowania czyli domyślnie albo w osi

2:02poziomej albo w osi pionowej no i możemy też do grid-auto-flow dać

2:06wartość dense aby zagęścić nasz layout i sprawić

2:11że elementy które zostawiły po sobie dziury to znaczy nie

2:15zmieściły się po prostu w jednym wierszu były przeniesione na sam początek naszego

2:20grida grid-auto-rows działa analogicznie do grid-auto-columns o którym właśnie powiedzieliśmy

2:24no i tak jak możemy ustawiać grid-column pierwszą

2:28wartość na powiedzmy index numer 2 w tym przypadku

2:32żeby umieścić to na tej linii i po slashu podać drugą wartość na

2:36przykład numer 3 tutaj no to możemy też pojedynczo te wartości

2:40przypisywać do odpowiednich właściwości czyli jeśli

2:44wpiszemy grid-column end no to będzie druga

2:49część tego zapytania czyli grid-column 2 3

2:54to jeśli wpiszemy w grid column end wartość 3 no

2:58to będzie to ekwiwalent tego zapisu z tym że nie ustawimy po

3:02prostu tej dwójki grid-columns start oczywiście działa w sposób analogiczny możemy

3:07też ustawiać odstępy pomiędzy kolumnami i wierszami osobno

3:11czyli nie musimy korzystać z grid-gap aby

3:15ustawiać równy odstęp między wierszami i

3:19kolumnami możemy użyć osobno grid-column-gap aby

3:23stworzyć margines między kolumnami w ten sposób no albo

3:27analogicznie grid-row-gap aby ustawić to w osi poziomej

3:32dla wierszy grid-column-start omówiliśmy grid column to

3:36jest shorthand z którego korzystaliśmy przez wszystkie poprzednie lekcje grid-gap to

3:40też jest shorthand grid-row tak samo omówiliśmy grid-row

3:45grid-template-areas pozwala nam na ustalenie poprzez

3:50stringi tego jak chcemy aby nasz layout się układał no

3:54i możemy nawet te ciągi znaków zapisać w osobnych liniach żeby to lepiej sobie

3:58zwizualizować możemy nawet wyrównać to tabulacją grid-template-columns

4:03służy do deklarowania ilości kolumn w naszej siatce grid-template-rows

4:10ilości wierszy w naszej siatce no

4:14i grid-template jest to skrót dla grid-template rows columns

4:19i grid-template-areas jeśli faktycznie

4:23czujecie się na tyle swobodnie z gridem możecie zacząć używać tych shorthandów

4:27ja ich unikam ponieważ osobiście uważam je za dosyć nieczytelne i

4:31preferuję używać ich osobno po prostu żeby jawnie komunikować

4:35się z innymi deweloperami którzy też tworzą layouty na gridzie możecie też

4:39analogicznie do flexa użyć samej właściwości grid

4:44która jest maksymalnym shorthandem maksymalną notacją skróconą jaką możecie w

4:48gridzie otrzymać no i jest kombinacją wszystkich właściwości które

4:52możemy na gridzie ustawić do tego oczywiście podchodzą jeszcze justify-content

4:56justify-self i tak dalej natomiast te powiązane stricte

5:01z gridem są tutaj strona css reference kropka io

5:05jeśli chcecie dowiedzieć się więcej zapraszam