Förstå grid-template-rows och grid-template-columns

För att bemästra CSS Grid-layout behöver du förstå hur du definierar strukturen för ditt rutnät med hjälp av egenskaperna grid-template-rows och grid-template-columns. Dessa egenskaper gör det möjligt att ange antal och storlek på rader och kolumner i din grid-behållare.

Syntaxen för båda egenskaperna är enkel: ange en mellanslagsseparerad lista av spårstorlekar med enheter som px, em, %, fr (fraktionella enheter) eller nyckelord som auto.

Exempel:

• grid-template-columns: 200px 1fr 2fr; skapar tre kolumner:
  • Första kolumnen är fast till 200 pixlar;
  • Andra kolumnen tar upp en fraktion av det återstående utrymmet;
  • Tredje kolumnen tar upp två fraktioner av det återstående utrymmet.
• grid-template-rows: 100px auto; skapar två rader:
  • Första raden är fast till 100 pixlar;
  • Andra raden anpassar sig automatiskt efter sitt innehåll.

Bästa praxis:

• Använd flexibla enheter som fr för responsiva layouter;
• Håll grid-definitionerna tydliga och lättlästa;
• Undvik alltför komplexa spårlistor om det inte är nödvändigt för din design.

Hur ändrade grid-definitioner påverkar layouten

När du justerar värdena för grid-template-rows och grid-template-columns styr du direkt antalet spår och deras storlek, vilket i sin tur påverkar hur grid-element visas.

• Ökat antal kolumner gör att grid-element flödar in i fler vertikala spår;
• Ändring av en rads storlek utökar eller minskar det tillgängliga utrymmet för dess element;
• Användning av flexibla enheter som fr gör att din layout smidigt kan anpassas till olika skärmstorlekar;
• Fasta enheter som px ger exakt kontroll över spårens dimensioner.

Att förstå hur dessa definitioner samverkar hjälper dig att förutse och hantera placering och storlek på grid-element, vilket gör dina layouter både robusta och responsiva.