CODELINE

Python
JavaScript
PHP
Wordpress
React

CSS Grid – place content

Kolejna sztuczka, którą warto znać pracując z CSS Grid. Kontynuacja lekcji poprzedniej o gridzie. Do dzieła!

Ok, nasz HTML:

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

Nasz CSS:

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

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

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

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

Damy teraz tekst wszystkim grid elementom na biało:

.grid-container > * {
    color: white;
}

A teraz najlepsze – możemy tym dzieciom też zrobić display grid. Nie po to, aby grida jakiegoś robić, ale tylko po to, by korzystać z justify content i align content:

.grid-container > * {
    color: white;
    display: grid;
    justify-content: center;
    align-content: center;
}

Teraz tekst jest ładnie w środku. Ale wykomentujmy to:

.grid-container > * {
    color: white;
    display: grid;
    /* justify-content: center;
    align-content: center; */
}

Pobawimy się ustawieniami. Najpierw wycentrowanie lewo/prawa i góra/dół:

.red {
    background-color: red;
    grid-column: 1/-1;
    justify-content: center;
    align-content: center;
}

Teraz lewy, dolny róg:

.green {
    background-color: green;
    justify-content: start;
    align-content: end;
}

A teraz prawy górny:

.blue {
    background-color: blue;
    justify-content: end;
    align-content: start;
}

Jeżeli mamy jedno i drugie takie samo, to możemy użyć place content:

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

Możemy też podawać dwie wartości, wtedy pierwsza, to align content, druga to justify content:

.green {
    background-color: green;
    place-content: center end; 
}

Powyżej mamy wyśrodkowany góra/dół, przesunięty najbardziej w prawo. Tekst, bo tym się bawimy. Cała sztuczka polega na tym, że nadajemy czemuś grid tylko po to, aby korzystać z justify content i align content.