Zaawansowane layouty
3 godz. 3 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerW początkowych lekcjach Kursu omówimy podstawową składnię CSS Grid, tak, by zbudować solidny fundament pod poznawanie kolejnych, bardziej rozbudowanych zagadnień. Na praktycznych przykładach poznasz i zrozumiesz różnice, jakie są pomiędzy CSS Grid a CSS Flexbox.
Po poznaniu niezbędnych, podstawowych zagadnień związanych ze składnią CSS Grid przejdziemy do tematu wykorzystania siatek. Wykorzystamy je do stworzenia responsywnych layoutów bez użycia media queries.
W kolejnych, bardziej rozbudowanych lekcjach kursu poznasz implikacje dotyczące dostępności. W obszernym rozdziale omówimy również szerzej najczęstsze błędy i nieporozumienia związane z CSS Grid.
Tak jak każda technologia, Grid ma swoje wady i zalety. Omówimy zarówno pierwsze, jak i drugie, tak, by wykorzystać pełen potencjał CSS Grid i nie dać się zniechęcić przez pewne jego wady. Dowiesz się również nieco na temat nadchodzących elementów w specyfikacji CSS Grid module level 2.
Aby być na bieżąco - warto uważnie śledzić najważniejsze i najbardziej aktualne źródła związane z CSS Grid. W końcowych rozdziałach pokażemy Ci naszym zdaniem najciekawsze źródła oraz osoby związane z Gridem, które warto znać oraz obserwować.
Jeśli chcesz poznać najbardziej aktualną i świetnie wspieraną metodę pozycjonowania elementów jaką jest CSS Grid, ten kurs jest właśnie dla Ciebie! Aby efektywnie korzystać z tego kursu potrzebujesz jedynie podstawowej wiedzy z zakresu HTML i CSS - a jeśli znasz Flexboxa, na pewno będzie Ci łatwiej zrozumieć niektóre koncepty.
Cześć na zakończenie tego kursu chciałem przedstawić ci kilka bardzo
fajnych źródeł i osób które znają się na css grid
które na pewno będą tworzyły nowe artykuły
treści wpisy dotyczące tej technologii i które mogą po
prostu uzupełnić wiedzę którą zyskałeś podczas
tego kursu pierwszą z nich jest css in real life
jest to blog autorstwa michele barker i tutaj znajduje się
bardzo dużo informacji na temat grida i nie tylko generalnie o css
natomiast jest bardzo dużo wpisów o samym gridzie
na przykład tutaj mamy część trzecia jakiejś serii artykułów o auto
flow kolejności umieszczania elementów i wielu
innych właściwościach powiązanych z gridem no i możecie
też oczywiście obserwować michele barker na twitterze czy
skontaktować się z nią mailowo kolejny przydatny artykuł jest to wpis
na css tricks autorstwa ollie williamsa o którym już wspomniałem podczas tego
kursu no i tutaj jest dużo takich sytuacji w których css-grid
może zachowywać się nie tak jak byśmy się tego spodziewali na przykład to gdzie
spodziewalibyśmy się że możemy stworzyć layout podobny do tetrisa natomiast nie
jest to po prostu możliwe no tutaj różne rozmyślania o tym
jak grid ma się do flexboxa no i generalnie bardzo dużo
ciekawych spostrzeżeń polecam complete guide to css
grid to jest ten sam typ wpisów co ultimate guide
to flexbox no i mamy tutaj bardzo dokładne omówienie
wszystkich właściwości grida różnych kombinacji jest
to taka jakby uproszczona dokumentacja czytelna dla deweloperów
więc polecam complete guide to grid no i oczywiście nie mogło zabraknąć
też grid garden jest to jest to gra wytwórni
codepip następca flexbox froggy no i mamy tutaj 28 poziomów
w które nie będziemy teraz grali oczywiście możecie w ramach ćwiczeń przejść
wszystkie 28 poziomów jeśli na którymś się zatrzymacie to
jest tutaj takie repozytorium na githubie grid garden z
rozwiązaniami dla poszczególnych przykładów ponieważ niektóre mogą być nie do końca jasno
opisane przez co będą trudniejsze niż w rzeczywistości być powinny
tak więc jeśli się gdzieś zatrzymacie tutaj macie rozwiązania
do każdej z lekcji natomiast oczywiście polecam abyście spróbowali rozwiązać
je samodzielnie kolejną osobą którą muszę polecić w kontekście grida jest jen simmons
jest to osoba która jest autorką wielu darmowych
tutoriali dotyczących css grid również video tutoriali no
i takie na przykład rzeczy możemy niesamowite w gridzie zrobić jeśli
ktoś jest zainteresowany typografią to jen simmons jest zdecydowanie osobą z której
można brać przykład i która zna dogłębnie flexboxa grid by example
jeśli chcemy faktycznie poznać więcej konkretnych
use case'ów grida jak możemy ułożyć dane layouty poznać
dodatkowe zasoby na ten temat no to grid by example to
jest miejsce które na pewno też można bardzo długo przeglądać w
poszukiwaniu dodatkowych informacji css grid kropka io
to jest kurs wes bosa darmowy też o gridzie
raczej większość rzeczy które były omówione w naszym kursie pokryją
to co znaleźlibyście u wes bosa natomiast jest to też na
pewno fajny darmowy kurs który możecie obejrzeć jeśli będziecie chcieli i
mieli czas css reference kropka io sekcja z gridem już
też to przeglądaliśmy podczas naszych lekcji natomiast ogólny spis
jako alternatywa dla artykułu na css tricks jeśli
ktoś preferuje to było to css reference jest też bardzo dużo
informacji na temat grida na mdn generalnie
mozilla bardzo zaangażowała się w tworzenie grida i jego
propagacje w sieci mozilla hacks to jest taki powiedzmy
kanał w którym różne osoby z mozilli i nie tylko dzielą
się tymi rzeczami które dopiero będą wchodziły do firefoxa albo jakimiś nowinkami
dotyczących technologii i w tym konkretnym artykule jest na przykład
o subgridzie czyli faktycznie mamy wytłumaczone krok po kroku jak działa
subgrid jaki jest jego stan kiedy możemy się go spodziewać w przeglądarkach
i tak dalej i autorką tego konkretnego wpisu jest rachel andrew
jeśli chcielibyście poszerzyć swoją wiedzę dotyczą grida
zdecydowanie też masa artykułów dotyczących zarówno
writing modes czyli na przykład jak nasz tekst ma być renderowany czy pionowo
czy poziomo co do css list czyli counterów ogromne
źródło wiedzy również zapisane w formie wideo jako nagrania
z różnych konferencji na których rachel akurat mówiła no i ostatni
wpis będzie to artykuł na medium do którego się odwoływaliśmy również
podczas kursu jeśli chcielibyście spróbować stworzyć masonry
layout możecie użyć tego artykułu jako bazę dzięki za uwagę
https://css-tricks.com/things-ive-learned-css-grid-layout/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://github.com/billfienberg/grid-garden#exercise-6
https://gridbyexample.com/examples/
https://cssreference.io/css-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://hacks.mozilla.org/2019/06/css-grid-level-2-subgrid-is-coming-to-firefox/
https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb