Grid w CSS3

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 i grid-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 funkcji repeat() do powtarzania wzorców.
  • grid-column i grid-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 miejscu grid-row-start, grid-column-start, grid-row-end, i grid-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.

Poprzedni
Następny
Scroll to Top