Let’s CSS #1 – kafelkowy grid

Dzisiejszym wpisem ruszamy z cyklem praktycznych tutoriali, dzięki którym podszkolisz swój CSS-owy warsztat. Jeśli zastanawiasz się, co rozwieje nudę prostokątnych kształtów ułożonych wzdłuż regularnych linii waszych monitorów, wyznaczających granice przeglądarek i layoutów, które wzbogacone o kolejne kolory i kształty uparcie wyglądają zbyt grzecznie, to odpowiem wam – przechylcie głowy o czterdzieści pięć stopni w bok. 😉

No dobrze, być może samo przechylenie głowy niewiele pomoże, niemniej potraktujmy to jako intrygujący wstęp do tego, co chciałbym opisać jako ciekawy pomysł na urozmaicenie wyglądu naszych witryn.

Ale do meritum. Poniżej zaprezentuje wam kafelkowy grid, który coraz częściej spotykam w projektach nowoczesnych stron internetowych, spełniający głównie funkcję estetyczną, ale wykorzystywany także jako menu, miejsce dla zdjęć czy też poglądowy skrót dla treści zawartych na stronie.

grid
Rys. 1

Przygotowany przeze mnie przykładowy grid składa się z dziewięciu rombów: pięciu małych i czterech dużych. Chcemy by nasza siatka była responsywna, dlatego musimy określić ich wielkość w skali procentowej. Niezbędne okażą się także proste obliczenia, aby rozmieścić kafelki w symetryczny i regularny sposób. Zacznijmy jednak od podstawowych struktur HTML i CSS, które nie wymagają rozległego komentarza.

<div class="container">
   <section class="grid-section">
     <div class="grid">
       <div id="diamond1" class="diamond></div>
       <div id="diamond2" class="diamond"></div>
       <div id="diamond3" class="diamond-big"></div>
       <div id="diamond4" class="diamond-big"></div>
       <div id="diamond5" class="diamond"></div>
       <div id="diamond6" class="diamond"></div>
       <div id="diamond7" class="diamond-big"></div>
       <div id="diamond8" class="diamond"></div>
       <div id="diamond9" class="diamond-big"></div>
    </div>
   </section>
</div>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

 

body {
  background-color: #b7b7b7;
}

 

.container {
  max-width: 1070px;
  padding: 0 30px;
  margin: 0 auto;
}

W kontenerze głównym, tworzymy sekcję w której umieszczamy diva wraz z zawartymi w nim kafelkami. Każdemu z nich, oprócz klasy, nadajemy także osobne id, ponieważ każdy z nich będzie miał unikatowe położenie względem swojego rodzica (div o klasie ”grid”).

Zanim na dobre weźmiemy się do nadania im odpowiednich stylów, zauważmy, że nasz grid składa się w istocie z kwadratów obróconych o czterdzieści pięć stopni. W tej formie będziemy rozmieszczać każdy kafelek i dokonywać odpowiednich obliczeń. Potem obrócimy cały grid o czterdzieści pięć stopni i tak, przy pomocy prostego zabiegu nasze kwadraty przyjmą postać rombów.

grid-kw
Rys. 2

Przejdźmy zatem do planowania przestrzeni naszego grida.

Dla klas przypisanych do dużych i małych kwadratów określamy szerokość oraz wysokość – ich wartości będą takie same. Dodatkowo ustawiamy kolor oraz wartość „display” na „inline-block”.

.diamond {
  width: 11.5%;
  padding-bottom: 11.5%;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
}

.diamond-big {
  width: 25%;
  padding-bottom: 25%;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
}

Szerokość małych kwadratów musi być trochę mniejsza niż połowa szerokości dużych. W ten sposób zyskujemy niezbędny odstęp pomiędzy nimi (w naszym przypadku wynosi on 2%).
Ustawmy teraz odpowiednie właściwości dla rodzica naszych kafelków, czyli dla diva o klasie „grid”. Ponieważ kwadraty będziemy pozycjonować absolutnie, musimy ustalić dla ich rodzica „position: relative”, oraz „padding-bottom: 100%” odpowiedzialny za responsywne zachowanie się naszego grida.

Obliczmy teraz pozycje naszych kwadratów. Chcemy, by nasz grid był ustawiony na środku strony, więc musimy wiedzieć ile zostaje nam miejsca po zsumowaniu szerokości kwadratów i odstępów między nimi i ile będziemy mieli miejsca żeby odsunąć naszą siatkę od bocznych krawędzi. Korzystając z rys.4, dodajemy kolejno szerokości ustawionych poziomo elementów oraz marginesów między nimi: 11.5% + 2% + 11.5% + 2% + 25% + 2% + 25% = 79%. Mamy zatem 21% szerokości do zagospodarowania na odstępy od krawędzi bocznych naszego kontenera głównego (po 10.5% z każdej strony). Dlatego pozycja pierwszego kafelka dla właściwości „left” będzie wynosiła 10.5%. Pozycje „top” ustawiamy kierując się wielkością większego kwadratu.

#diamond1 {
  position: absolute;
  top: 25%;
  left: 10.5%;
}

Korzystając z naszej wiedzy ustawiamy pozycje kolejnych kafelków. Np. dla drugiego: do aktualnej pozycji pierwszego kwadratu we właściwości „left” dodajemy odstęp 2% oraz szerokość pierwszego kwadratu – 11.5%. Wartość top będzie taka sama jak dla pierwszego kwadratu itd.

Zajmijmy się jeszcze przez chwilę właściwościami, które musimy dodać do diva z klasą „grid”. To jest właśnie ten moment kiedy nasze kwadraty staną się rombami. Ustawiamy właściwość „transform: rotate(45deg)”, oraz „transform-origin: 39%”, która pomoże nam wycentrować grida. Dlaczego akurat 39%?

W zależności od kąta obrotu oraz rozmieszczenia i ilości kwadratów w naszym gridzie, optyczny środek ciężkości będzie spoczywał gdzie indziej, dlatego nie sposób określić stałą wartość, która ustawi go na środku. Stąd proponowana przeze mnie metoda, by ustawiać go początkowo w okolicach 45-50% i potem manipulować nim do momentu osiągnięcia faktycznego, bądź optycznego środka strony.

Zbliżamy się do końca, nasz grid w końcu zdobył kształt rombów i spoczywa na środku strony. Dodajemy jeszcze do sekcji o klasie „grid-section” właściwość „overflow: hidden”, aby wierzchołki niewidzialnego diva o klasie „grid” (rys. 7), wystające poza krawędzie głównego kontenera, nie wpływały na szerokość strony.

grid-ziel
Rys. 3

Dodajemy także dla sekcji odpowiednio duży „padding-bottom”, aby sekcja z gridem mogła prezentować się w swojej całej okazałości.

Nasz grid jest gotowy. Umieszczając w rombach jakiekolwiek elementy musimy pamiętać o tym, żeby przypisać im właściwości „position: absolute”, aby ich zawartość nie rozpychała rombów oraz „transform: rotate(-45deg)”, aby zapobiec ich obróceniu. Jeśli chodzi o obrazy, musimy także pamiętać o przypisaniu danemu rombowi, w którym będzie znajdował się obraz, wcześniej wspomnianej właściwości „overflow: hidden” – dzięki temu widoczna będzie tylko ta część obrazu, która pokrywa się z rombem. Obraz powinien mieć także ustawiony odpowiednio większy rozmiar, aby wypełnił całą przestrzeń rombu.

Poniżej zamieszczam resztę użytych styli. Mam nadzieję, że powyższy tutorial pomoże Ci uatrakcyjnić layout twojej strony.

.grid-section {

    overflow: hidden;
    padding-bottom: 200px;

}

.grid {
    padding-bottom: 100%;
    position: relative;
    transform: rotate(45deg);
    transform-origin: 39%;
}

.diamond {
    width: 11.5%;
    padding-bottom: 11.5%;
    background-color: rgba(255, 255, 255, 0.3);
    display: inline-block;
}

.diamond-big {
    width: 25%;
    padding-bottom: 25%;
    background-color: rgba(255, 255, 255, 0.6);
    display: inline-block;
}
#diamond1 {
  position: absolute;
  top: 25%;
  left: 10.5%; 
}
#diamond2 {
  position: absolute;
  top: 25%;
  left: 24%; 
}
#diamond3 {
  position: absolute;
  top: 11.5%;
  left: 37.5%;
}
#diamond4 {
  position: absolute;
  top: 38.5%;
  left: 24%;
}
#diamond5 {
  position: absolute;
  top: 38.5%;
  left: 51%;
}
#diamond6 {
  position: absolute;
  top: 52%;
  left: 51%;
}
#diamond7 {
  position: absolute;
  top: 38.5%;
  left: 64.5%;
}
#diamond8 {
  position: absolute;
  top: 65.5%;
  left: 51%;
}
#diamond9 {
  position: absolute;
  top: 65.5%;
  left: 64.5%;
}

Site Footer

Sliding Sidebar