CSS Grid – mini ćwiczenie

Małe ćwiczenie w CSS Grid, które ma nam nieco otworzyć głowę i nauczyć, jak ta cała manipulacją w gridzie działa. Do dzieła!

Ok, zróbmy sobie taki HTML:

<div class="grid-container">
        <div class="red">red</div>
        <div class="green">green</div>
        <div class="blue">blue</div>
    </div>

Teraz style CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

Ok i co mamy? Rozlało nam się na całą szerokość. Div i szerzej elementy blokowe tak działają. Dlatego 1fr to w tej konfiguracji 1/2 szerokości ekranu.

Ok, dodajmy sobie height:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 200px;
}

Teraz 1fr to będzie 100px. Bo mamy wysokość 200, mamy 2 rzędy po 1fr, czyli 200px/2 = 1fr, czyli 100px. Wystarczy dać tam 4 i już nasze elementy będą miały wysokość po 50px:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 200px;
}

Ok, fajnie, a teraz co się stanie, gdy jako kolumny użyjemy wartości absolutnej? I suma szerokości kolumn nie będzie większa od szerokości ekranu? Zobaczmy:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(4, 1fr);
}

Przykleiły nam się do 0,0 (top left) te elementy. Bo div ma cały czas width 100% (domyślnie), zaś 200px to nie jest 100%. Możemy sobie w centrum te elementy przesunąć za pomocą justify content jak we flexboksie z flex direction row:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(4, 1fr);
    justify-content: center;
}

Różnica jest taka, że jak mieliśmy kolumny fr, to grid brał width diva (tutaj 100% domyślnie) i dzielił przez ilość kolumn i tak wyliczał 1fr. Gdy mamy wartości absolutne… to albo suma tych kolumn jest większa albo mniejsza niż width kontenera.

Jak większa, to mamy overflow. Jak mniejsza, to mamy puste miejsce, i jak w flexboksie możemy nim zarządzać przez justify content.

Ok, ale height to jest tutaj automatycznie wyliczane. Nadajmy height stałe, nadajmy absolutną wartość rzędom i niech ich suma będzie mniejsza niż height:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(4, 30px);
    justify-content: center;
    height: 400px;
    /* width: 400px;
    justify-content: center;
    height: 400px;
    align-content: center; */ 
}

Nie ma takiej opcji, aby 4x30px było większe niż 400px. Więc mamy wolne miejsce i tutaj align content może nam wycentrować:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(2, 30px);
    justify-content: center;
    height: 400px;
    align-content: center; 
}

Czyli teraz grid ma wymiary 200px width 60px height, zaś div (kontener) ma wymiary 100% width 400px height. I grid znajduje się w samym środku wymiarów tego diva, wycentrowany na osi góra/dół.

To jeszcze taka mała sztuczka z grid elementem:

.red {
    background-color: red;
    grid-column: 1/-1;
}

Teraz red rozleje się na wszystkie kolumny, green i blue będą poniżej i nie trzeba specjalnie cudować w CSS aby tak go rozlać. Mam nadzieję, że powoli zaczynamy kumać, jak nie, to polecam jakieś tutoriale na yt, zabawę samemu albo po prostu przerobić to ćwiczenie raz jeszcze.

Polecam też bawić się przeglądarkami, minimum to jest Chrome i Firefox i oczywiście devtoolsy używamy. Inaczej nigdy nie zrozumiemy CSSa ani tego, co tutaj napisałem. Bo to, co widzimy jako użytkownik to jest jedno. Devtoolsy pokazują nam, jak naprawdę jest.