Prosta sztuczka, ale zarazem genialna. Dawno nie robiliśmy CSSa, najwyższa pora do niego wrócić. Do dzieła.
Ok, tworzymy taki HTML:
<body>
<div class="grid-container">
blabla
</div>
</body>Pamiętamy, że domyślnie to div rozlewa się na całą szerokość strony, choć aby to zauważyć, potrzebujemy:
- Jakąś treść (inaczej będzie mieć 0 wysokości), względnie ustawione na sztywno height
- Background color (względnie możemy w devtoolsach podglądać)
Ok, zróbmy sobie reset stylów:
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}Od teraz tak będziemy resetować, po pierwsze uwzględniając pseudoelementy before i after, po drugie w wildcardzie trzymamy box sizing oraz czcionki, margin, padding i background trzymamy w body.
Zmienne CSS jakby były potrzebne – idą do root. Ok, to teraz zobaczmy, czy rzeczywiście ten block element jakim jest div rozleje się nam na całą szerokość:
.grid-container {
background-color: tomato;
}Rozlał. Ok, teraz na całą wysokość go bierzemy:
.grid-container {
background-color: tomato;
min-height: 100vh;
}Ok, zróbmy display grid:
.grid-container {
background-color: tomato;
min-height: 100vh;
display: grid;
}Teraz pozmieniajmy mu tam coś:
<div class="grid-container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>Dajmy im jakieś kolory:
.box1 {
background-color: aqua;
}
.box2 {
background-color: goldenrod;
}
.box3 {
background-color: aliceblue;
}Ok, nadajmy kolumny i wiersze:
.grid-container {
background-color: tomato;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 100px);
}Teraz mamy mega rzecz. Ten cały grid jest stackowany w lewym górnym rogu (pozycja 0,0 dla top left) a z kolei tło rozlewa się na cały ekran. Div jest rozlany na cały ekran, zaś grid ma swoje wymiary.
I co może nam się wydawać nie do ogarnięcia, to to, że możemy w takiej sytuacji pomóc sobie tym, co użylibyśmy w flexboxie! Czyli justify-content:
.grid-container {
background-color: tomato;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
}Już siedzą w środku na linii lewo-prawo. Grid kontenery nie mają flex-direction więc dla nich jest to działanie jak dla flexboxa z row. Po prostu main axis przebiega od lewej do prawej.
W grid nie używamy flex-start ani flex-end, tylko start, end, center. Możemy nimi poruszać naszymi itemami w gridzie. Mało tego, mamy do dyspozycji align-content:
.grid-container {
background-color: tomato;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
align-content: center;
}Teraz cały nasz grid siedzi w środku ekranu. Align content to jest ta własność, którą w flexbox manipulowaliśmy jak nam się wrapowało do kilku rzędów. Tutaj sterujemy rzędami w tym momencie.
Bo mamy sytuację taką – każdy rząd ma wysokość 100px tutaj, ale sam grid container ma wysokość 100vh. Mamy sporo tej wolnej przestrzeni, pytanie co z nią zrobić?
Domyślnie to grid został ustawiony w pozycji 0,0 i tyle. Justify content przesunęło nam wszystko na środek, tam się te 4 kolumny po 100px znajdują. Ok, zostają jeszcze rzędy. Nie cross axis, nie align items, tego tu nie ma. Rzędy.
Zróbmy tak to najlepiej zrozumiemy:
.grid-container {
background-color: tomato;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
align-content: space-between;
}Swoją drogą zobaczmy, że wymiary diva to jest rozlanie wysokości i szerokości na cały ekran, ale nie pokrywa się to z wymiarami grida. On ma swoje a tymi tutaj właściwościami pomagamy sobie.
Wracamy na center, oto cały nasz patent:
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: tomato;
}
.grid-container {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
align-content: center;
row-gap: 10px;
}Background color do body, row gap dodałem jakby ktoś chciał odległości to ma. Zdejmijmy sobie justify content i align content, a nasz grid będzie w pozycji 0,0, zaś div będzie zajmował cały ekran, kolor z body to będzie tło ekranu.
Warto też zwrócić uwagę, że justify content będziemy potrzebować wtedy, gdy na osi lewo-prawo mamy jakąś wolną przestrzeń. Teraz nie będzie potrzebne:
.grid-container {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 500px);
grid-template-rows: repeat(4, 100px);
/* justify-content: center; */
align-content: center;
}Nie ma co centrować, wręcz poza ekran nam się wylało. Podobnie teraz:
.grid-container {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
/* justify-content: center; */
align-content: center;
}Teraz każda kolumna ma szerokość 1/4 ekranu, bo grid container zabiera cały width. A jak damy 1fr dla rzędów, do align content nie będzie miało żadnego wpływu:
.grid-container {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 1fr);
justify-content: center;
/* align-content: center; */
}Ale grid wycentrowany góra-dół nie będzie. Będzie przyklejony do góry. Aby grid był wycentrowany musimy mieć kolumny z wartością absolutną z wolnym miejscem plus align content center:
.grid-container {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
align-content: center;
}Dopiero teraz to wszystko w środku leży.
Oczywiście jak damy za dużą wartość to ten align content też nie będzie do niczego potrzebny:
.grid-container {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 1000px);
justify-content: center;
/* align-content: center; */
}