CSS Grid Layout to potężny system układu stron, który pozwala na tworzenie złożonych projektów stron internetowych za pomocą dwuwymiarowej siatki. Umożliwia precyzyjne pozycjonowanie elementów oraz ich rozmiar w kontenerze siatki. W tej lekcji przyjrzymy się różnym aspektom Grid Layout, w tym sposobom definiowania siatek, pozycjonowania elementów oraz wykorzystania różnych wartości dla właściwości grid.
Definiowanie siatki
Pierwszym krokiem w pracy z Grid jest zdefiniowanie kontenera siatki. Używamy do tego właściwości display
z wartością grid
lub inline-grid
. Następnie, za pomocą właściwości grid-template-columns
i grid-template-rows
, możemy zdefiniować kolumny i wiersze naszej siatki.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład wykorzystania Grid w CSS3</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px; /* Odstępy między elementami */
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
W tym przykładzie grid-template-columns: repeat(3, 1fr);
definiuje trzy kolumny o równej szerokości, gdzie 1fr
oznacza jedną frakcję dostępnego miejsca. gap: 10px;
definiuje odstępy między elementami siatki.
Pozycjonowanie elementów
Możemy precyzyjnie kontrolować, gdzie elementy siatki się znajdują, używając właściwości takich jak grid-column
i grid-row
. Pozwalają one określić, w których kolumnach lub wierszach element powinien się zaczynać i kończyć.
.grid-item {
grid-column: 2 / 4; /* Element zaczyna się w kolumnie 2 i kończy w 4 */
grid-row: 1; /* Element znajduje się w pierwszym wierszu */
}
Różne wartości właściwości
grid-template-columns
igrid-template-rows
: Pozwala na definiowanie rozmiarów kolumn i wierszy. Można użyć wartości stałych (np.100px
), procentowych, frakcyjnych (fr
), a także funkcjirepeat()
do powtarzania wzorców.grid-column
igrid-row
: Określa położenie elementu w kontenerze siatki. Można określić pojedynczą kolumnę/wiersz lub zakres.justify-items
,align-items
: Pozwalają na wyrównanie elementów wewnątrz komórek siatki w poziomie i pionie.grid-area
: Umożliwia definiowanie obszaru zajmowanego przez element w siatce, łącząc w jednym miejscugrid-row-start
,grid-column-start
,grid-row-end
, igrid-column-end
.
Podsumowanie
CSS Grid oferuje potężne narzędzia do tworzenia responsywnych układów stron. Dzięki łatwej definicji siatek, kontrolowaniu rozmiaru i pozycji elementów, a także elastycznym jednostkom jak fr
, deweloperzy mogą tworzyć złożone i estetycznie przyjemne układy bez konieczności polegania na zewnętrznych bibliotekach lub frameworkach. Ważne jest, aby eksperymentować z różnymi właściwościami Grid i zrozumieć, jak mogą one pracować razem, aby stworzyć responsywne i atrakcyjne strony internetowe.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.