Rutmall-kolumner / rutmall-rader - CSS-tricks

Den grid-template-rowsoch grid-template-columnsegenskaper är de primära CSS-egenskaper för att etablera ett rutnät layout, när elementet är ett rutnät kontext ( display: grid;).

Det finns också -ms-grid-columnsoch -ms-grid-rowssom är den gamla IE-versionen av detta. Du kanske vill överväga Autoprefixing för att få dem, eller inte, ditt samtal. Det var också en konstig period där de var grid-definition-columnsoch grid-definition-rows, men det är inte en sak längre.

Här är ett exempel som härrör från Microsofts dokumentation:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Detta definierar antalet rader / kolumner i rutnätet samt deras dimension.

Dessa två egenskaper stöder en lista över värden åtskilda av mellanslag. Varje värde definierar en ny kolumn / rad genom att ange en dimension. En lista med fyra värden kommer att resultera i fyra kolumner / rader. Ett enda värde ger en enda kolumn / rad.

Accepterade värden inkluderar längd (som pxeller em), procentsatser, bråk ( fr; se nedan), auto(eller fit-content) min-content,,, max-contentoch minmax(), eller repeat()funktionen.

I kodexemplet ovan betyder det:

Kolumn 1 ( automatisk nyckelord): Kolumn passar till innehållet i kolumnen.
Kolumn 2 (“100px”): Kolumnen är 100 pixlar bred.
Kolumn 3 (“1fr”): Kolumnen tar upp en bråkdel av det återstående utrymmet.
Kolumn 4 (“2fr”): Kolumn tar upp två bråkdelar av det återstående utrymmet.

Rad 1 (“50px”): Rad är 50 pixlar lång.
Rad 2 (“5em”): Rad är 5 em lång.
Rad 3 ( nyckelord med min innehåll ): Rad är så liten som innehållet låter det vara.
Rad 4 ( automatisk nyckelord): Rad anpassas till innehållet i raden.

upprepa()

Den repeat()funktionen har utformats särskilt för denna modul. Det låter dig definiera ett mönster som upprepas X gånger. Gilla repeat(6, 1fr);. Låt oss säga att du vill göra 12 kolumner med lika breda avstånd från varandra med 1% marginal du kan definiera 1fr repeat(11, 1% 1fr). Det är samma som 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Fr Enheten

Den frEnheten kan användas för grid-rowsoch grid-columnsvärderingar. Det står för ”bråkdel av tillgängligt utrymme”. Tänk på det som procentsatser för tillgängligt utrymme när du har tagit bort kolumner / rader med fast storlek och innehåll. Som specifikationen säger:

Fördelningen av bråkutrymme sker efter att alla 'längd' eller innehållsbaserade rad- och kolumnstorlekar har nått sitt maximala.

Relaterad

Vår bästa resurs för allt CSS-rutnät är vår kompletta guide till CSS Grid.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.