Grid Layout w CSS3

By /

CSS

CSS Grid Layout to potężny system układu stron, który umożliwia tworzenie złożonych projektów stron internetowych za pomocą prostego i intuicyjnego kodu. Jest to dwuwymiarowy system układu, co oznacza, że może jednocześnie kontrolować układ wierszy i kolumn. CSS Grid pozwala deweloperom na precyzyjne umiejscowienie elementów zarówno w pionie, jak i w poziomie, oferując nieporównywalną elastyczność i kontrolę nad strukturą strony.

Podstawy CSS Grid:

  • Grid Container: Element nadrzędny, dla którego ustawia się display: grid lub display: inline-grid, staje się kontenerem siatki (grid container).
  • Grid Item: Bezpośrednie dzieci kontenera siatki stają się elementami siatki (grid items).
  • Grid Lines: Linie tworzące strukturę siatki, które mogą być numerowane i używane do określania położenia elementów siatki.
  • Grid Tracks: Wiersze i kolumny w siatce, które są tworzone przez grid lines.

Przykład użycia CSS Grid:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>CSS Grid Layout</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr; /* Tworzy trzy kolumny */
            grid-template-rows: auto; /* Wysokość wierszy
                                      dostosowuje się do zawartości */
            gap: 10px; /* Odstęp między elementami siatki */
            padding: 10px;
        }
        
        .grid-item {
            background-color: lightblue;
            text-align: center;
            padding: 20px;
            border: 1px solid navy;
        }
    </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-container jest ustawiony jako kontener siatki z trzema kolumnami o różnych proporcjach (1fr 2fr 1fr), gdzie fr oznacza frakcję dostępnej przestrzeni. Elementy .grid-item automatycznie rozmieszczają się w siatce zgodnie z zadeklarowanymi kolumnami i wierszami.

Kiedy używać CSS Grid:

  • Do tworzenia złożonych układów stron, które wymagają precyzyjnej kontroli nad rozmieszczeniem wierszy i kolumn.
  • Kiedy projektowanie responsywne jest kluczowe; Grid oferuje wiele możliwości dostosowania układu do różnych rozmiarów ekranu za pomocą jednostek fr i mediów zapytań.
  • W sytuacjach, gdy potrzebujesz łatwo manipulować przestrzenią między elementami siatki (gap).

Podsumowanie:

CSS Grid Layout rewolucjonizuje sposób tworzenia układów stron internetowych, oferując niezrównaną elastyczność i kontrolę. Dzięki możliwości definiowania dwuwymiarowych siatek, Grid pozwala na łatwe i intuicyjne projektowanie złożonych interfejsów użytkownika, które są zarówno estetyczne, jak i funkcjonalne. Nauka i zastosowanie CSS Grid w praktyce może znacząco poprawić jakość i efektywność tworzonych stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top