CSS Grid: Zagęszczanie layoutu

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ć

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 · 2 min

<div class="container">
     <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 class="item item11">11</div>
     <div class="item item12">12</div>
     <div class="item item13">13</div>
     <div class="item item14">14</div>
     <div class="item item15">15</div>
     <div class="item item16">16</div>
     <div class="item item17">17</div>
     <div class="item item18">18</div>
     <div class="item item19">19</div>
     <div class="item item20">20</div>
     <div class="item item21">21</div>
     <div class="item item22">22</div>
     <div class="item item23">23</div>
     <div class="item item24">24</div>
     <div class="item item25">25</div>
     <div class="item item26">26</div>
     <div class="item item27">27</div>
     <div class="item item28">28</div>
     <div class="item item29">29</div>
     <div class="item item30">30</div>
     <div class="item item31">31</div>
     <div class="item item32">32</div>
     <div class="item item33">33</div>
     <div class="item item34">34</div>
     <div class="item item35">35</div>
     <div class="item item36">36</div>
     <div class="item item37">37</div>
     <div class="item item38">38</div>
     <div class="item item39">39</div>
     <div class="item item40">40</div>
     <div class="item item41">41</div>
     <div class="item item42">42</div>
     <div class="item item43">43</div>
     <div class="item item44">44</div>
     <div class="item item45">45</div>
     <div class="item item46">46</div>
     <div class="item item47">47</div>
     <div class="item item48">48</div>
     <div class="item item49">49</div>
     <div class="item item50">50</div>
   </div>
   <style>
     .container {
       display: grid;
       background: red;
       
       grid-template-columns: repeat(7, 1fr);
       grid-auto-flow: dense;
     }
     
     .item:nth-child(3n) {
       grid-column: span 2;
     }
   </style>

Stan początkowy

<div class="container">
     <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 class="item item11">11</div>
     <div class="item item12">12</div>
     <div class="item item13">13</div>
     <div class="item item14">14</div>
     <div class="item item15">15</div>
     <div class="item item16">16</div>
     <div class="item item17">17</div>
     <div class="item item18">18</div>
     <div class="item item19">19</div>
     <div class="item item20">20</div>
     <div class="item item21">21</div>
     <div class="item item22">22</div>
     <div class="item item23">23</div>
     <div class="item item24">24</div>
     <div class="item item25">25</div>
     <div class="item item26">26</div>
     <div class="item item27">27</div>
     <div class="item item28">28</div>
     <div class="item item29">29</div>
     <div class="item item30">30</div>
     <div class="item item31">31</div>
     <div class="item item32">32</div>
     <div class="item item33">33</div>
     <div class="item item34">34</div>
     <div class="item item35">35</div>
     <div class="item item36">36</div>
     <div class="item item37">37</div>
     <div class="item item38">38</div>
     <div class="item item39">39</div>
     <div class="item item40">40</div>
     <div class="item item41">41</div>
     <div class="item item42">42</div>
     <div class="item item43">43</div>
     <div class="item item44">44</div>
     <div class="item item45">45</div>
     <div class="item item46">46</div>
     <div class="item item47">47</div>
     <div class="item item48">48</div>
     <div class="item item49">49</div>
     <div class="item item50">50</div>
   </div>
   <style>
     .container {
       display: grid;
       
       grid-template-columns: repeat(7, 1fr);
     }
   </style>