CSS Academy · Lektion

Namngivna linjer och namngivna gridområden

Namnge gridlinjer och områden för mer läsbar och underhållbar grid-placering.

Lektion 1 av 413 steg

Namngivna linjer och namngivna gridområden är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Namnge gridlinjer

Gridlinjer kan ges namn inom hakparenteser i grid-template-columns och grid-template-rows. Namngivna linjer gör placeringskoden mer lättläst än råa siffror.

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

Placera objekt med namngivna linjer

Använd namngivna linjer i grid-column och grid-row för lättläst placering:

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

Linjenamn med -start och -end

När namngivna områden definieras med grid-template-areas skapar CSS automatiskt namngivna linjer med suffixen -start och -end som du kan referera till.

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

Upprepade namngivna linjer

När du använder repeat() kan du inkludera namn i det upprepade mönstret. Linjerna får numrerade suffix för att skilja dem åt.

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

Spänna över namngivna linjer

Använd namngivna linjer med span för att spänna över ett visst antal namngivna spår:

  <div class="grid">
    <div class="header">Header spans 3</div>
    <div>A</div><div>B</div><div>C</div>
  </div>

Sammanfattning av namngivna områden

Namngivna områden (via grid-template-areas) är det mest lättlästa sättet att placera objekt:

  <div class="page">
    <header>Header</header>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
    <div class="footer">Footer</div>
  </div>

Namngivna linjer för komplexa layouter

Namngivna linjer är särskilt användbara i komplexa redaktionella layouter med flera objekt som sträcker sig över flera spår:

  <div class="magazine">
    <div class="full-bleed">Full bleed banner</div>
    <div class="article">Article content</div>
  </div>

Kombinera namn och siffror

Namngivna linjer och linjenummer kan blandas fritt i samma grid:

  <div class="layout"><div class="item">Item</div></div>

Flera namn på en linje

En enda linje kan ha flera namn – användbart när en linje fungerar både som slutet på ett område och början på ett annat:

  <div class="grid">
    <div>Sidebar</div>
    <div>Content</div>
  </div>

Implicit namngivna linjer från områden

Om du definierar ett namngivet område med namnet "main" skapas linjerna main-start (kolumn och rad) och main-end automatiskt. Då kan du använda dem för överlappande objekt.

Felsöka namngivna linjer i DevTools

Chrome och Firefox DevTools kan visa namngivna gridlinjer som etiketter i överlagringen. Aktivera linjeetiketter i Layout-panelen för att kontrollera att namnen är korrekta.

Snabb kontroll

När du definierar ett namngivet gridområde med namnet "sidebar" i grid-template-areas, vilka linjenamn skapas automatiskt?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Namnge gridlinjer inom hakparenteser i spårdefinitioner för lättläst placering. Namngivna områden genererar automatiskt linjenamnen -start och -end. En linje kan ha flera namn. Namngivna linjer kan fritt kombineras med span och siffror. Använd DevTools för att visualisera namngivna linjer som överlagringar.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Namngivna linjer och namngivna gridområden” gratis?

Ja – hela texten till ”Namngivna linjer och namngivna gridområden” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Namngivna linjer och namngivna gridområden”?

Namnge gridlinjer och områden för mer läsbar och underhållbar grid-placering. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Namngivna linjer och namngivna gridområden”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Namngivna linjer och namngivna gridområden
Auto-fit och auto-fill med minmax
Implicit grid och grid-auto-flow
Subgrid för justerat kapslat innehåll

← Tillbaka till CSS Academy