Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 12/ 31Obszary szablonowe
CSS Grid: Obszary szablonowe
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 początkowy
<div class="container">
<div class="header">
Header
</div>
<div class="content">
<h1> Title </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quo itaque ea quos nostrum iure minus hic saepe, aut assumenda impedit nulla excepturi incidunt quam pariatur veritatis magnam placeat illum?
Lorem
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, explicabo. Maiores accusantium aliquam, consequatur molestiae dicta omnis quos ipsam vitae provident debitis deserunt obcaecati praesentium minima nihil placeat nam facilis?</p>
</div>
<div class="footer">
Visit our sites!
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae molestias vitae. Incidunt consectetur vitae dolor perspiciatis hic, provident eligendi reiciendis accusantium consequuntur amet eius accusamus ipsum saepe facere molestias.
</p>
</div>
<div class="sidebar">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis consequatur enim ex nihil debitis veniam aspernatur? Praesentium, itaque commodi corporis delectus, veritatis, aliquid quia eum reprehenderit ducimus quasi a repudiandae?
</div>
</div>
<style>
.container {
display: grid;
}
</style>Stan końcowy · 9 min
<div class="container">
<div class="header">
Header
</div>
<div class="content">
<h1> Title </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quo itaque ea quos nostrum iure minus hic saepe, aut assumenda impedit nulla excepturi incidunt quam pariatur veritatis magnam placeat illum?
Lorem
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, explicabo. Maiores accusantium aliquam, consequatur molestiae dicta omnis quos ipsam vitae provident debitis deserunt obcaecati praesentium minima nihil placeat nam facilis?</p>
</div>
<div class="footer">
Visit our sites!
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae molestias vitae. Incidunt consectetur vitae dolor perspiciatis hic, provident eligendi reiciendis accusantium consequuntur amet eius accusamus ipsum saepe facere molestias.
</p>
</div>
<div class="sidebar">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis consequatur enim ex nihil debitis veniam aspernatur? Praesentium, itaque commodi corporis delectus, veritatis, aliquid quia eum reprehenderit ducimus quasi a repudiandae?
</div>
</div>
<style>
.container {
display: grid;
grid-template-areas:
"header header header"
"content content sidebar"
"footer footer footer";
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
@media only screen and (max-width: 700px) {
.container {
grid-template-areas:
"header header header"
"content content content"
"sidebar sidebar sidebar"
"footer footer footer";
}
}
@media only screen and (min-width: 1024px) {
.container {
grid-template-areas:
". header sidebar"
"content content sidebar"
"content content sidebar"
"footer footer footer";
}
}
</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