I mars släppte Mozilla Firefox 52, som gav stöd för CSS Grid Layout. Om du inte är bekant med CSS Grid är det ett tvådimensionellt layoutsystem för webben som gör att vi kan skapa layoutmönster nativt i webbläsaren. Detta innebär att vi enkelt kan återskapa välkända rutnät med hjälp av bara några få rader CSS. Det betyder också att vi kan göra en hel del med CSS och layouter som inte var möjligt tidigare… men mer om det om en stund.
En snabb notering: Det här inlägget är inte tänkt att vara en heltäckande grundkurs i CSS Grid, och förutsätter en grundläggande förtrogenhet med CSS Grid. Om du inte redan har gjort det rekommenderar jag att du kollar in den fantastiska CSS Grid Layout-sidan på MDN.
Layouter på webben har alltid varit knepiga. När webben först introducerades fanns det ingen metod för layouter. Sedan kom tabeller (i tabeller, i tabeller, i tabeller, i tabeller). Det var hackigt och konstigt, men det fungerade. När CSS introducerades i slutet av 90-talet kunde utvecklarna börja använda divs och floats för sin design och layout. Detta ledde så småningom till ramverk och rutnätssystem som hjälpte till att förstå alla ”gotchas” som att rensa floats, negativa marginaler, responsiv design med mera. Och så har det varit i flera år nu. Det finns tusentals rutnätssystem, men alla är mer eller mindre likadana.
Nu när CSS Grid Layout är en realitet ville jag se vad som skulle krävas för att ersätta ett befintligt rutnätssystem med CSS Grid. För det här experimentet valde jag det populära ramverket Bootstrap.
Jag började med att skapa en grundläggande webbplats med hjälp av Bootstrap-grid:
Se den på CodePen.
Så låt oss bryta ner det här och omvandla det för att använda CSS Grid.
I Bootstrap omsluter klassen .container allting och fastställer begränsningarna för bredd. Den lägger också till en utfyllnad på vänster och höger kant och centrerar allting. Det finns inte mycket att ändra här. Precis som i Bootstrap kan containerklassen vara praktisk att använda med CSS Grid. Jag återskapade den så här:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}Vi kan också lägga till responsiva brytpunkter genom att lägga till följande:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap använder klassen .row för att linda in kolumner och ge en negativ marginal till vänster och höger för att förneka den padding som läggs till av enskilda kolumner. Hacks som negativa marginaler behövs inte längre med CSS Grid, men om du har läst dokumentationen vet du att CSS Grid kräver en gridcontainer. Klassen .row är den perfekta platsen för detta. Låt mig visa dig vad jag gjorde och sedan bryter vi ner det.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid skapar gridcontainern.
Gegenskapen grid-template-columns definierar kolumnerna för gridet. Du kan använda mellanslag för att definiera varje kolumn individuellt, men här använder vi repeat-notationen för att definiera 12 lika stora kolumner. 1fr hänvisar till bredden på den enskilda kolumnen. MDN definierar fr-enheten som en ny enhet som ”representerar en bråkdel av det tillgängliga utrymmet i rutnätsbehållaren”. Du kan läsa mer om fr-enheter på MDN. Du kan också läsa mer om egenskapen grid-template-columns.
Finally, the grid-gap property is a shorthand property that defines both the amount of space between the columons and between rows of columns. Tänk på det som vår ränna. Du kan läsa mer om grid-gap här.
Nu återstår bara kolumnklasserna. Bootstrap använder kolumnklasser som .col-md-6 eller .col-lg-8 för att bestämma antalet kolumner som en div ska spänna över. Den gör också div:n flytande och lägger till utfyllnad till vänster och höger för att skapa rännor mellan kolumnerna. Det är otroligt enkelt att återskapa dessa klasser tack vare kortfattat egenskapen .grid-column. Om vi till exempel vill återskapa klassen .col-md-6 kan vi använda följande:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Enkel, eller hur? Inga floats. Ingen utfyllnad. Det fungerar bara. Förkortningen grid-column anger ett objekts storlek och placering. Vi kan använda span för att ange att just det här objektet ska sträcka sig över sex kolumner. Rännan tas automatiskt om hand tack vare omslagets egenskap grid-gap. Du kan läsa mer om egenskapen grid-column här.
Så vad händer när du sätter ihop allt? Jo, webbplatsen ser exakt likadan ut, men vi kan helt ta bort Bootstrap-beroendet och använda inhemska CSS-grids.
Kolla in den uppdaterade webbplatsen på CodePen.
Den här typen av experiment är en rolig inlärningsövning, men den kan också vara farlig. För att låna en replik från den kloke filosofen Jeff Goldblum:
”You … were so preoccupied with whether or not you could, you didn’t stop to think if you should.”
Vi vill inte begränsa CSS Grid genom att tvinga in det i en syntax som begränsar dess potential. Vi kunde enkelt återskapa Bootstraps rutnät, men CSS Grid är så mycket mer kraftfullt än alla rutnätssystem som kom före det. Det beror på att det är en webbaserad lösning som är byggd från grunden.
Vi är inte längre låsta till 12-kolumniga rutnät som flyter från vänster till höger. Vill du placera element på exakta platser i rutnätet, oberoende av deras ordning i HTML-källan? Gör det. Vill du skapa element som sträcker sig över flera kolumner och rader? Inga problem. Kolla in den här demonstrationen som Mozillas Craig Cook skapade för att visa upp olika layoutmönster. Försök att återskapa några av dessa layouter med Bootstrap (tips: inte möjligt). Vi skrapar bara på ytan av vad CSS Grids kan göra.