Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 18/ 31Odwracanie kolejności renderowania
CSS Grid: Odwracanie kolejności renderowania
Czego się nauczysz
- Poznanie podstawowej składni CSS Grid
- Zrozumienie różnic między CSS Grid a CSS Flexbox
- Wykorzystanie siatek do tworzenia responsywnych layoutów bez użycia media queries
- Implikacje dotyczące dostępności
- Najczęstsze błędy i nieporozumienia
- Wady i zalety grida
- Nadchodzące elementy w specyfikacji CSS Grid module level 2
- Osoby i źródła które warto znać i obserwować
CSS Grid - Zaawansowane layouty
CSS Grid to najnowsza metoda pozycjonowania elementów natywna dla CSSa - a niektórzy twierdzą, że jest to następca dla CSS Flexbox. Być może mają racje, ponieważ w porównaniu do Flexboxa, Grid ma o wiele większe możliwości i spójniejszą składnię. Dodatkowo idealnie wpasowuje się w ideę Progressive Enhancement, czyli stopniowego dostarczania coraz to lepszych doświadczeń użytkownikom, w zależności od używanego przez nich urządzenia. CSS grid to potężne narzędzie które pozwoli Ci stworzyć responsywne layouty - nawet bez użycia media queries.
Poznaj podstawy CSS Grid
W 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.
Siatki i responsywne layouty
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.
Unikaj najczęstszych błędów
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.
Wady i zalety Grida
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.
Ciekawe źródła i materiały
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ć.
Dla kogo jest ten kurs?
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.
Kod
Stan końcowy · 6 min
<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
<div class="flex">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
<style>
.grid {
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(10, min-content);
justify-content: end;
direction: rtl;
}
.grid > * {
direction: ltr;
}
.flex {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
</style>Stan początkowy
<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
<div class="flex">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
<style>
.container {
display: grid;
}
.flex {
display: flex;
}
</style>Kurs CSS Grid
6 rozdziałów31 lekcji3h 3min
Wprowadzenie
8min
- Wprowadzenie2min(zablokowana)
- Narzędzia developerskie2min(zablokowana)
- Model pracy z Gridem3min(zablokowana)
Poznajemy składnie CSS Grid
1h 19min
- Kolumny i wiersze6min(zablokowana)
- Rozmiary torów8min(zablokowana)
- Funkcja repeat4min(zablokowana)
- Ustalanie rozmiarów elementów8min(zablokowana)
- Umieszczanie elementów na siatce9min(zablokowana)
- Automatyczne dopasowywanie i wypełnianie5min(zablokowana)
- Funkcja minmax5min(zablokowana)
- Dopasowywanie do treści6min(zablokowana)
- Obszary szablonowe10min(zablokowana)
- Pozycjonowanie na krańcach obszarów8min(zablokowana)
- Nazywanie linii8min(zablokowana)
- Zagęszczanie layoutu3min(zablokowana)
Różnice i podobieństwa CSS Grid do CSS Flexbox
24min
- Wyrównywanie elementów siatki7min(zablokowana)
- Kolejność wyświetlania4min(zablokowana)
- Odwracanie kolejności renderowania6min(zablokowana)
- Podsumowanie różnic7min(zablokowana)
Podsumowanie dostępnych właściwości i słów kluczowych
10min
- Słowa kluczowe i funkcje5min(zablokowana)
- Wszystkie właściwości i notacje skrócone5min(zablokowana)
Ciekawe przypadki i zastosowania
57min
- Wady i zalety grida8min(zablokowana)
- Zbiór albumów6min(zablokowana)
- Tablica Trello na gridzie9min(zablokowana)
- Masonry layout4min(zablokowana)
- Własny bootstrap bez boostrapa oraz CSS custom properties8min(zablokowana)
- Grid Tetris3min(zablokowana)
- Responsywny layout witryny13min(zablokowana)
- Nadchodzące zmiany6min(zablokowana)
Zakończenie
5min
- Przydatne blogi i linki5min(zablokowana)
- Podziękowania1min(zablokowana)
Ten kurs jest w bazie eduweb
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.
Autor kursu
Bio
Cześć! Nazywam się Wojtek i moja obecna rola to Full Stack Engineer - tworzeniem stron zajmuję się już od ponad dziesięciu lat. Jeśli miałbym wskazać moją pasję, to zdecydowanie byłoby to programowanie w technologiach webowych i dalsze szerzenie się wiedzą :)
Możesz kojarzyć mnie z kanału Koduje na Youtube, gdzie stworzyłem ponad 50 darmowych poradników dotyczących różnych zagadnień z Front-Endu, czy jako głównego koordynatora cyklicznych spotkań Meet.js Warszawa. Poza tym jestem też członkiem programu Mozilla TechSpeakers - technologie open-source, ich tworzenie oraz przemowy publiczne również nie są mi obce. Od czasu do czasu prowadzę również indywidualne zajęcia dla osób poszukujących swojej pierwszej pracy jako Front-End developer.
Uwielbiam tematykę dostępności sieci - o której świadomość, zwłaszcza na polskim rynku - jest dosyć znikoma. Interesuję się również IoT oraz VR (❤️) czy Game-Developmentem, również w JavaScript!
Uważam, że nauczanie jest zdecydowanie najlepszą metodą, by poszerzać swoje horyzonty i dalej się rozwijać!
https://koduje.pl