Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 28/ 31Responsywny layout witryny
CSS Grid: Responsywny layout witryny
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 · 11 min
<ul class="grid">
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v1" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v2" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v3" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v4" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v5" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v4" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v3" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v2" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v1" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
</ul>
<style>
.grid {
display: grid;
list-style-type: none;
margin: 0;
padding: 0;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(0, 400px));
justify-content: center;
}
.grid figure {
background: rgba(255,255,255, 0.1);
padding: 20px;
margin: 0;
display: grid;
grid-gap: 20px;
justify-items: center;
}
.grid img {
max-width: 100%;
}
</style>Stan początkowy
<header class="header">
<input class="search" placeholder="search...">
<div class="account"></div>
</header>
<div class="banner">
<img src="https://source.unsplash.com/random/400x200?v1">
<button class="banner__button">
Learn more
</button>
<button class="banner__button">
About us
</button>
</div>
<ul class="navigation">
<li>
<a href="#">
Forest
</a>
</li>
<li>
<a href="#">
Sea
</a>
</li>
<li>
<a href="#">
Mountains
</a>
</li>
<li>
<a href="#">
Beach
</a>
</li>
</ul>
<!-- <ul class="albums">
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v1" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v2" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v3" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v4" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v5" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v4" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v3" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v2" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://source.unsplash.com/random/200x200?v1" alt="">
<figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nobis fugit dolorem recusandae saepe quidem voluptatibus quaerat, incidunt, enim praesentium ad, vitae modi sunt debitis tempora vel pariatur dolores quos? </figcaption>
</figure>
</li>
</ul> -->
<style>
</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