CSS Grid: Zbiór albumów

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 początkowy

<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;
     }
   </style>

Stan końcowy · 6 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>