Wprowadzenie do CSS Grid
CSS Grid to potężne narzędzie do tworzenia dwuwymiarowych układów na stronach internetowych. Głównym celem CSS Grid jest uproszczenie procesu tworzenia elastycznych, responsywnych i estetycznych układów stron. System ten opiera się na dwuwymiarowej siatce, która pozwala na precyzyjne pozycjonowanie elementów oraz ich skalowanie w zależności od rozmiaru ekranu czy urządzenia. Dzięki temu, możliwe jest lepsze planowanie z różnymi układami, jednocześnie zapewniając doskonałe wrażenia użytkownika na różnych platformach. CSS Grid ułatwia także współpracę z innymi technologiami, takimi jak Flexbox czy animacje CSS, co pozwala na tworzenie jeszcze bardziej zaawansowanych i efektownych efektów wizualnych.
display: grid
display: grid; lub display: inline-grid; — Włącza układ grid dla kontenera. Wartość grid sprawia, że kontener staje się blokowym elementem, natomiast inline-grid sprawia, że kontener staje się elementem liniowo-blokowym.
.container {
display: grid; /* lub display: inline-grid */
}grid-template-columns
grid-template-columns: — Definiuje szerokości kolumn siatki. Można podać konkretne wartości (px, em, %, itp.) lub stosować jednostki frakcji (fr), które reprezentują część dostępnej przestrzeni. Można również użyć wartości auto lub repeat().
.container {
grid-template-columns: 1fr 2fr 1fr; /* Trzy kolumny o szerokościach proporcjonalnych 1:2:1 */
}grid-template-rows
grid-template-rows: — Definiuje wysokości wierszy siatki. Podobnie jak w przypadku grid-template-columns, można podać konkretne wartości, jednostki frakcji (fr), wartości auto lub użyć repeat().
.container {
grid-template-rows: auto 100px auto; /* Trzy wiersze, z wysokością środkowego równą 100px */
}grid-gap
grid-gap: — Określa odstępy między wierszami i kolumnami siatki. Można podać jedną wartość (odstęp dla wierszy i kolumn będzie taki sam) lub dwie wartości (pierwsza dla wierszy, druga dla kolumn). Odstęp można podać w jednostkach px, em, %, itp.
.container {
grid-gap: 10px; /* Odstęp 10px między wierszami i kolumnami */
/* lub */
grid-gap: 10px 20px; /* Odstęp 10px między wierszami i 20px między kolumnami */
}Przykład użycia podstawowych właściwości CSS Grid:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
}W powyższym przykładzie kontener grid ma trzy kolumny o równych szerokościach (grid-template-columns: repeat(3, 1fr)) i automatycznie dostosowaną wysokość wierszy (grid-template-rows: auto). Odstęp między wierszami i kolumnami wynosi 20px (grid-gap: 20px).
Warto zapamiętać
CSS Grid jest łatwym i elastycznym narzędziem do tworzenia zaawansowanych układów stron internetowych. W połączeniu z właściwościami przedstawionymi powyżej, można tworzyć responsywne siatki, które są dostosowane do różnych rozmiarów ekranów i zawartości.
Warto również zaznaczyć, że istnieje wiele innych właściwości CSS Grid, które pozwalają na jeszcze większą kontrolę nad układem siatki, takie jak pozycjonowanie elementów, definiowanie obszarów siatki czy tworzenie układów responsywnych za pomocą mediów responsywnych media queries.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
