CSS Grid – kompendium wiedzy

Właściwości

Grid w CSS przyjmuje następujące właściwości:

• grid-template-columns i grid-template-rows – określają one szerokości kolumn i wysokości wierszy w siatce,
• grid-template-areas – pozwala definiować obszary w siatce za pomocą nazw, umożliwiając łatwe rozmieszczanie elementów,
• grid-template – jest to skrócona forma określania grid-template-columns, grid-template-rows i grid-template-areas w jednym miejscu,
• grid-column i grid-row – określają pozycję i rozmiar elementów w siatce pod względem kolumn i wierszy,
• grid-gap lub gap – ustala odstępy między kolumnami i wierszami w siatce,
• justify-items i align-items – określają wyrównanie elementów w kolumnach i wierszach,
• justify-content i align-content – ustalają sposób wyrównania całej siatki w kontenerze, gdy zajmuje ona mniej miejsca niż dostępne,
• grid-auto-columns i grid-auto-rows – określają szerokość i wysokość automatycznie tworzonych kolumn i wierszy,
• grid-auto-flow – kontroluje automatyczny przepływ elementów, jeśli jest za mało miejsca w siatce.

Powyższe właściwości pozwalają precyzyjnie definiować układy siatki w CSS, co jest użyteczne do tworzenia responsywnych i elastycznych układów stron internetowych.

Template columns i template rows

Obie właściwości służą do definiowania szerokości kolumn i wysokości wierszy w siatce stworzonej za pomocą display: grid. Pozwalają one określić rozmiary poszczególnych elementów w siatce lub ich proporcje względem siebie.

Przykład grid-template-columns:

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr; /* Trzy kolumny: pierwsza 100px, druga 200px, trzecia zajmuje resztę dostępnego miejsca */
}

Przykład grid-template-rows:

.container {
  display: grid;
  grid-template-rows: 50px auto; /* Dwa wiersze: pierwszy 50px, drugi dostosowuje się automatycznie do zawartości */
}

W obu przykładach użyłem różnych jednostek, takich jak px (piksele), fr (proporcjonalna jednostka frakcji) oraz auto (automatyczne dopasowanie do zawartości). Można stosować różne jednostki miar w jednym wyrażeniu grid-template-columns lub grid-template-rows, aby uzyskać elastyczne i zróżnicowane układy siatki.

Template areas

grid-template-areas to właściwość grid w CSS, która umożliwia definiowanie układu siatki poprzez nazwy obszarów, co ułatwia rozmieszczanie elementów w siatce. Każdy obszar jest określony za pomocą nazwy i może zawierać jeden lub więcej elementów.

Prosty układ siatki z nazwanymi obszarami:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

W tym przykładzie grid-template-areas definiuje układ siatki za pomocą nazwanych obszarów. Każdy element w kontenerze grid (header, sidebar, content, footer) jest umieszczany w odpowiednich obszarach za pomocą grid-area. Dzięki temu można łatwo i czytelnie zdefiniować układ strony.

Column oraz row

Właściwości grid-column i grid-row w CSS służą do precyzyjnego określania pozycji oraz rozmiaru elementów w siatce za pomocą kolumn i wierszy. Są wykorzystywane do określania, gdzie i jak duże będą poszczególne elementy. Można używać różnych kombinacji liczb, span oraz innych wartości, aby elastycznie definiować rozmiary i pozycje elementów w układzie.

Przykład pierwszy:

.item1 {
  grid-column: 1 / 3; /* Element zajmuje przestrzeń od kolumny 1 do kolumny 3 */
  grid-row: 2; /* Element znajduje się w drugim wierszu */
}

.item2 {
  grid-column: 2 / span 2; /* Element zaczyna się od kolumny 2 i zajmuje dwa miejsca w siatce */
  grid-row: 1 / 3; /* Element zajmuje przestrzeń od pierwszego do trzeciego wiersza */
}

Drugi przykład:

.item1 {
  grid-column: 2 / span 3; /* Element zaczyna się od kolumny 2 i zajmuje trzy miejsca w siatce */
  grid-row: 1; /* Element znajduje się w pierwszym wierszu */
}

.item2 {
  grid-column: 1 / 4; /* Element zajmuje przestrzeń od kolumny 1 do kolumny 4 */
  grid-row: 2; /* Element znajduje się w drugim wierszu */
}

Gap

grid-gap w CSS to właściwość, która określa odstęp między kolumnami i wierszami w siatce utworzonej za pomocą grid. Jest to skrótowa właściwość dla grid-column-gap i grid-row-gap, jednak można jej używać do ustawiania odstępów zarówno między kolumnami, jak i wierszami jednocześnie.

Dla równego odstępu między kolumnami i wierszami konstrukcja CSS będzie następująca:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-gap: 20px; /* Odstęp 20px między kolumnami i wierszami */
}

Użycie różnych wartości grid-gap dla odstępów między kolumnami i wierszami:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 50px 100px;
  grid-gap: 10px 20px; /* Odstęp 10px między kolumnami, 20px między wierszami */
}

Użycie skróconej właściwości z jednym parametrem:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px; /* Odstęp 15px między kolumnami i wierszami */
}

W tych przykładach grid-gap został zastosowany do ustawienia odstępów między kolumnami i wierszami w siatce. Można używać tej właściwości do szybkiego i łatwego definiowania równomiernych lub różnych odstępów w układzie siatki.

Justify items i align items

justify-items i align-items, analogicznie do flexbox, to właściwości w CSS używane w kontekście układu siatki (display: grid). Pozwalają one ustawić wyrównanie elementów wzdłuż osi kolumn (justify-items) i osi wierszy (align-items) w kontenerze siatki.

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  justify-items: center; /* Wyrównanie elementów wzdłuż osi kolumn do środka */
  align-items: center; /* Wyrównanie elementów wzdłuż osi wierszy do środka */
}

Ta właściwość określa, jak elementy są wyrównane wzdłuż osi kolumn w kontenerze siatki (start, center, end, stretch). Natomiast align-items definiuje wyrównanie elementów wzdłuż osi wierszy (start, center, end, stretch). Te właściwości można stosować w celu precyzyjnego pozycjonowania i wyrównywania elementów w siatce.

Justify content i align content

justify-content i align-content to właściwości w CSS stosowane w gridzie, które pozwalają na zarządzanie przestrzenią między elementami w kontenerze siatki wzdłuż osi kolumn (justify-content) i wierszy (align-content), gdy siatka nie wypełnia całego dostępnego obszaru.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  justify-content: center; /* Wyśrodkowanie siatki wzdłuż osi kolumn */
  align-content: space-between; /* Rozłożenie przestrzeni między wierszami */
  height: 300px; /* Ustalenie wysokości kontenera */
}

Obie właściwości przyjmują parametry start, center, end, space-between, space-around, space-evenly. Te właściwości działają, gdy siatka jest mniejsza niż jej kontener, umożliwiając kontrolę nad tym, jak elementy są rozlokowane w dostępnym obszarze. Można używać różnych wartości, aby uzyskać różne efekty i wygląd siatki w kontenerze.

Auto columns, rows i flow

Właściwości grid-auto-columns i grid-auto-rows w CSS służą do określania szerokości i wysokości automatycznie tworzonych kolumn i wierszy w grid. Te właściwości kontrolują rozmiar kolumn i wierszy, które nie są jawnie zdefiniowane w układzie siatki, ale tworzone automatycznie na podstawie zawartości lub innych reguł.

Przykład grid-auto-columns:

.container {
  display: grid;
  grid-template-columns: 100px 100px; /* Określone dwie kolumny */
  grid-auto-columns: 50px; /* Automatycznie tworzone kolumny będą miały szerokość 50px */
}

W tym przykładzie grid-auto-columns ustawia szerokość automatycznie tworzonych kolumn na 50 pikseli. To oznacza, że w przypadku braku jawnego zdefiniowania więcej niż dwóch kolumn, nowe kolumny będą miały szerokość 50px każda.

Przykład grid-auto-rows:

.container {
  display: grid;
  grid-template-rows: 50px 50px; /* Określone dwa wiersze */
  grid-auto-rows: minmax(100px, auto); /* Automatycznie tworzone wiersze będą miały wysokość od 100px do dostosowania do zawartości */
}

grid-auto-rows ustawia automatycznie tworzone wiersze tak, aby miały wysokość od 100 pikseli do dopasowania do zawartości. Jeśli pojawi się więcej niż dwa wiersze (zdefiniowane), to te, które są automatycznie tworzone, będą dostosowywały swoją wysokość w zależności od zawartości.

Z kolei grid-auto-flow to właściwość, która kontroluje automatyczny przepływ elementów, gdy siatka ma za mało miejsca na rozmieszczenie wszystkich elementów.

Przykład z wierszami:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-flow: row; /* Elementy układane są w kolejnych wierszach */
}

Przykład z kolumnami:

.container {
  display: grid;
  grid-template-rows: 50px 50px;
  grid-auto-flow: column; /* Elementy układane są w kolejnych kolumnach */
}

Te wartości właściwości grid-auto-flow są przydatne, gdy siatka potrzebuje elastycznie układać dodatkowe elementy, które nie mieszczą się w określonym układzie siatki. W ten sposób można kontrolować sposób, w jaki nowe elementy są dodawane, gdy brakuje miejsca w bieżącym układzie.

Podsumowanie

Dzięki wszystkim właściwościom display: grid można tworzyć elastyczne, responsywne układy stron, zapewniając kontrolę nad rozmieszczeniem elementów w intuicyjny i wydajny sposób. W połączeniu z media queries umożliwia tworzenie stron, które dynamicznie dostosowują się do różnych rozmiarów ekranów i urządzeń.