Podstawy CSS Grid

/* Włączenie CSS Grid */
.container {
    display: grid;
}

/* Definicja kolumn i wierszy */
.grid-3x2 {
    display: grid;
    grid-template-columns: 200px 200px 200px; /* 3 kolumny po 200px */
    grid-template-rows: 100px 100px;          /* 2 wiersze po 100px */
    gap: 10px;                                /* Odstęp 10px */
}

/* Jednostka fr (fraction) - elastyczne rozmiary */
.grid-flexible {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Proporcje 1:2:1 */
    grid-template-rows: auto;            /* Wysokość automatyczna */
    gap: 1rem;
}

/* Funkcja repeat() - powtarzanie wzorców */
.grid-repeat {
    display: grid;
    grid-template-columns: repeat(4, 1fr);     /* 4 równe kolumny */
    grid-template-columns: repeat(3, 100px);   /* 3 kolumny po 100px */
    grid-template-columns: repeat(2, 1fr 2fr); /* Wzorzec 1fr 2fr powtórzony 2x */
}

/* Funkcja minmax() - minimalna i maksymalna szerokość */
.grid-minmax {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 1rem;
}

/* Auto-fill i auto-fit - automatyczna liczba kolumn */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

/* Siatka 4x3 */
.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
}

/* Pozycjonowanie elementu w siatce */
.item-a {
    grid-column: 1 / 3;  /* Od linii 1 do linii 3 (2 kolumny) */
    grid-row: 1 / 2;     /* Od linii 1 do linii 2 (1 wiersz) */
}

/* Skrócona składnia że span */
.item-b {
    grid-column: span 2; /* Rozciągnij na 2 kolumny */
    grid-row: span 2;    /* Rozciągnij na 2 wiersze */
}

/* Pozycja startowa + span */
.item-c {
    grid-column: 2 / span 2; /* Start od kolumny 2, rozciągnij na 2 */
    grid-row: 2 / span 1;    /* Start od wiersza 2, 1 wiersz */
}

/* Element na całą szerokość */
.item-full-width {
    grid-column: 1 / -1; /* Od pierwszej do ostatniej linii */
}

/* Przykład praktyczny: karta wyróżniona */
.featured-card {
    grid-column: span 2;
    grid-row: span 2;
}

.regular-card {
    grid-column: span 1;
    grid-row: span 1;
}

/* Definicja layoutu strony z nazwanymi obszarami */
.page-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    min-height: 100vh;
    gap: 0;
}

/* Przypisanie elementów do obszarów */
.header {
    grid-area: header;
    background: #333;
    color: white;
}

.sidebar {
    grid-area: sidebar;
    background: #f0f0f0;
}

.main {
    grid-area: main;
    padding: 2rem;
}

.footer {
    grid-area: footer;
    background: #333;
    color: white;
}

/* Responsywna zmiana layoutu */
@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 80px auto 1fr 60px;
        grid-template-areas:
            "header"
            "sidebar"
            "main"
            "footer";
    }
}

/* TEN SAM LAYOUT - porównanie Grid i Flexbox */

/* ===== FLEXBOX ===== */
/* Dobre do: nawigacji, kart w jednym rzędzie, centrowania */

.nav-flexbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cards-flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card-flexbox {
    flex: 0 0 calc(33.333% - 1rem); /* Ręczne obliczanie szerokości */
}


/* ===== CSS GRID ===== */
/* Dobre do: layoutu strony, siatek, złożonych układów 2D */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Automatyczna szerokość */
    gap: 1rem;
}

.page-grid {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    grid-template-rows: auto 1fr auto;
}


/* ===== KIEDY UŻYWAĆ? ===== */

/*
FLEXBOX - gdy:
- Układ jednowymiarowy (wiersz LUB kolumna)
- Elementy mają różne rozmiary
- Potrzebujesz elastycznego rozmieszczenia
- Nawigacja, toolbar, lista tagów

GRID - gdy:
- Układ dwuwymiarowy (wiersze I kolumny)
- Potrzebujesz precyzyjnej siatki
- Layout całej strony
- Galeria zdjęć, dashboard

MOŻNA ŁĄCZYĆ:
- Grid dla layoutu strony
- Flexbox dla komponentów wewnątrz
*/

/* Responsywny layout z CSS Grid */

.products-grid {
    display: grid;
    gap: 1.5rem;
    padding: 1rem;
}

/* MOBILE (domyślnie) - 1 kolumna */
.products-grid {
    grid-template-columns: 1fr;
}

/* TABLET (768px+) - 2 kolumny */
@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* DESKTOP (1024px+) - 3 kolumny */
@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* DUŻY DESKTOP (1400px+) - 4 kolumny */
@media (min-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1600px;
        margin: 0 auto;
    }
}

/* Automatyczna responsywność bez media queries! */
.auto-responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Wyróżniona karta na całą szerokość na mobile */
.featured-product {
    grid-column: 1 / -1; /* Pełna szerokość */
}

@media (min-width: 1024px) {
    .featured-product {
        grid-column: span 2; /* 2 kolumny na desktopie */
    }
}