CSS Grid Layout är ett kraftfullt system för att skapa tvådimensionella layouter på webben. Det erbjuder en helt ny nivå av kontroll och flexibilitet jämfört med äldre layoutmetoder som float och flexbox. Den här guiden ger en grundläggande introduktion till CSS Grid och hur du kan använda det för att skapa dynamiska och responsiva layouter för dina webbprojekt.

Vad är CSS Grid?

CSS Grid är ett layoutsystem som gör det möjligt att skapa komplexa och flexibla grid-baserade layouter med enkla CSS-regler. Med CSS Grid kan du definiera rader och kolumner, placera element exakt där du vill ha dem och skapa design som tidigare krävde omfattande och komplicerad CSS.

Grundläggande begrepp

Grid container och grid items

För att använda CSS Grid behöver du två huvudkomponenter: en grid container och grid items.

• Grid container: Det element som definierar gridens struktur. Du gör ett element till en grid container genom att sätta display: grid; på det.
• Grid items: De direkta barnen till grid containern som placeras i gridens rader och kolumner.

Definiera rader och kolumner

Du definierar antalet rader och kolumner i en grid container med hjälp av egenskaperna grid-template-rows och grid-template-columns.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Skapar tre lika breda kolumner */
  grid-template-rows: auto; /* Raderna anpassar sig efter innehållet */
}

Placera grid items

Grid items kan placeras inom grid containern genom att använda egenskaper som grid-column och grid-row.

.item1 {
  grid-column: 1 / 3; /* Sträcker sig från kolumn 1 till 2 (3-1) */
  grid-row: 1 / 2; /* Sträcker sig över första raden */
}

Avancerade tekniker

Grid gaps

grid-gap egenskapen (eller dess moderna ekvivalenter row-gap och column-gap) används för att sätta avstånd mellan rader och kolumner.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px; /* Sätter ett mellanrum på 10px mellan alla rader och kolumner */
}

Fraktionenheter (fr)

Fraktionenheter (fr) är ett flexibelt sätt att dela upp tillgängligt utrymme inom en grid container.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Första kolumnen tar 1 del, andra tar 2 delar av utrymmet */
}

Minmax() och auto-fill

minmax() funktionen och auto-fill värdet erbjuder dynamisk flexibilitet vid skapandet av grid layouter.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Skapar så många kolumner som får plats, minst 100px breda */
}

Implicit och explicit grid

Ett explicit grid definieras genom specifika rader och kolumner. Ett implicit grid skapas när grid items placeras utanför de definierade raderna och kolumnerna.

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Explicit grid med två kolumner */
}

.item3 {
  grid-column: 3; /* Placeras i en implicit skapad tredje kolumn */
}

Responsiva layouter med CSS Grid

CSS Grid kan enkelt användas för att skapa responsiva layouter genom att använda media queries och fraktionenheter.

.container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr; /* Två kolumner på större skärmar */
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr; /* Tre kolumner på ännu större skärmar */
  }
}

Praktisk tillämpning

Exempel: En enkel layout

Här är ett exempel på en enkel grid layout med en header, sidebar, main content och footer.

<div class="container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main content</main>
  <footer class="footer">Footer</footer>
</div>

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-gap: 10px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

Exempel: En mer komplex layout

För en mer avancerad layout kan du använda fler rader och kolumner samt kombinera olika tekniker.

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main content</div>
  <div class="extra">Extra content</div>
  <div class="footer">Footer</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main extra"
    "footer footer footer";
  grid-gap: 10px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.extra {
  grid-area: extra;
}

.footer {
  grid-area: footer;
}

Slutsats

CSS Grid är ett flexibelt och kraftfullt verktyg för att skapa komplexa och responsiva layouter. Genom att förstå de grundläggande begreppen och teknikerna kan du börja använda CSS Grid i dina egna projekt och ta din webblayout till nästa nivå. Experimentera med olika inställningar och upptäck hur CSS Grid kan förenkla och förbättra din designprocess.