Nowoczesne układy CSS Grid: Od podstaw do zaawansowanych

CSS Grid zrewolucjonizował projektowanie układów stron internetowych, zapewniając potężny dwuwymiarowy system układu. Przyjrzyjmy się wszystkiemu od podstaw po zaawansowane techniki.

Podstawy Grid

CSS Grid działa z kontenerem nadrzędnym (kontener grid) i elementami potomnymi (elementy grid):

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

Podstawowe właściwości Grid

Grid Template Columns i Rows

/* Stałe rozmiary */
.grid {
  grid-template-columns: 200px 200px 200px;
}

/* Elastyczne rozmiary */
.grid {
  grid-template-columns: 1fr 2fr 1fr;
}

/* Mieszane rozmiary */
.grid {
  grid-template-columns: 200px 1fr auto;
}

/* Funkcja repeat */
.grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Obszary Grid

Definiuj nazwane obszary grid dla semantycznych układów:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Responsywne układy Grid

Auto-Fit i Auto-Fill

/* Auto-fit: kolumny zwijają się gdy są puste */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Auto-fill: utrzymuje liczbę kolumn */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

Media Queries z Grid

.responsive-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Zaawansowane techniki Grid

Subgrid (ograniczone wsparcie)

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child-grid {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
}

Umieszczanie elementów Grid

.featured-item {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.sidebar-item {
  grid-column: 3;
  grid-row: 1 / -1;
}

Praktyczne przykłady

Układ kart

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

Układ magazynowy

.magazine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 200px);
  gap: 16px;
}

.article-1 { grid-area: 1 / 1 / 3 / 4; }
.article-2 { grid-area: 1 / 4 / 2 / 7; }
.article-3 { grid-area: 2 / 4 / 4 / 6; }
.article-4 { grid-area: 2 / 6 / 4 / 7; }
.article-5 { grid-area: 3 / 1 / 5 / 3; }
.article-6 { grid-area: 3 / 3 / 5 / 4; }

Grid vs Flexbox

• Używaj Grid do: Dwuwymiarowych układów, złożonego pozycjonowania
• Używaj Flexbox do: Jednowymiarowych układów, wyrównywania komponentów

Wsparcie przeglądarek i fallbacki

.layout {
  /* Fallback */
  display: flex;
  flex-wrap: wrap;
  
  /* Ulepszenie Grid */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Podsumowanie

CSS Grid zapewnia bezprecedensową kontrolę nad układami stron internetowych. Zacznij od prostych gridów i stopniowo wprowadzaj zaawansowane funkcje jak obszary grid i techniki responsywne dla nowoczesnych, elastycznych projektów.