Se till att dina layouter är fullt responsiva med en alternativ mätenhet.

För inte så länge sedan var vi helt beroende av att använda procentsatser för bredder och höjder. Att använda procentsatser innebar att din layout och dina element kunde anta en höjd och bredd baserat på visningsporten. Men när modern CSS fortsätter att utvecklas har vi kommit till en punkt där det till och med kan vara en bra idé att undvika att använda procentsatser.

Lär dig mer om de vanliga problemen du kommer att stöta på när du använder procentsatser. Ta också reda på om de moderna CSS-teknikerna att använda i stället för procentsatser. Dessa tekniker ger dig samma resultat som procentsatser utan några av nackdelarna.

Ett mycket enkelt rutnätsexempel

För att visa ett problem med procentenheter, överväg denna HTML-layout:

<divklass="behållaremitt rutnät">
 <divklass="rutnätsobjekt">
div>
 <divklass="rutnätsobjekt">
div>
div>

Det yttre elementet är en grundläggande div containerelement med två div barn. Varje barn har en

instagram viewer
rutnätsobjekt klass. För att förvandla behållaren till ett rutnät med två kolumner (två rutor) måste vi använda följande CSS-kod:

kropp {
bakgrundsfärg: svart;
align-objekt: Centrum;
motivera-innehåll: flex-start;
}
.my-grid {
visa: rutnät;
rutnät-mall-kolumner: 50% 50%;
marginal: 3rem;
gräns: 2pxfastguld;
stoppning: 1rem;
}
.grid-objekt {
gräns: 3pxfastguld;
stoppning: 10rem 0;
bakgrund: blå;
}

Så varje kolumn (rutnät) har en bakgrundsfärg av guld. På containerförälderklassen ställer vi in rutnät-mall-kolumn till 50 % för varje kolumn. Som ett resultat tar båda lådorna upp 50 % av behållarelementets totala bredd.

Här är resultatet:

Men det finns problem med denna anpassning. Först, om du bestämde dig för att lägga till en glipa till nätföräldern kan barnet svämma över från sidan. Till exempel om du skulle lägga till gap: 3px till .my-grid block i CSS, så här ser layouten ut:

Som du kan se på bilden ovan har den högra rutan flyttat ut ur behållaren. Ibland kanske du inte märker det eftersom ditt gap är tillräckligt litet, vilket resulterar i ett konstigt anpassningsproblem. Men om du hade ett större gap, så blir överlappningen ganska uppenbar.

När du använder procentsatser och lägger till marginaler eller luckor, finns det en stor chans att uppleva den här typen av fel. Men varför uppstår felet?

Det beror på att varje kolumn är 50 % av föräldern. I exemplet ovan har vi 50 % plus 50 % plus det gapet (3px), som trycker ut lådan ur behållaren.

Observera att detta fel inte bara inträffar med 50-50. Du kan ställa in den första kolumnen till 75 %, den andra kolumnen till 25 % och felet kommer fortfarande att uppstå. Det är därför du behöver använda följande lösning oftare.

Lösningen med bråkvärden

Lösningen är att använda bråkvärden istället för procentsatser. Så istället för att ställa in den första kolumnen till 75 % och den andra till 50 %, kan du ställa in den första kolumnen till 3fr och den andra kolumnen till 1fr:

rutnät-mall-kolumner: 3fr 1fr

Detta bibehåller samma förhållande som det första exemplet. Men fördelen med att använda fr enheter är att de använder en bråkdel av det tillgängliga utrymmet. I det här fallet kommer den första kolumnen att ta tre delar av utrymmet medan den andra kolumnen kommer att ta en del, exklusive mellanrummet.

En annan fördel med att använda frs framför procentsatser – eller annat absoluta enheter, som px eller em—är att man kan kombinera dem med fasta värden. Här är ett exempel:

rutnät-mall-kolumner: 1fr 10rem;

Med koden ovan får du ett fast värde som aldrig ändras oavsett skärmstorlek. Detta beror på att kolumnen till höger alltid kommer att ligga kvar på 10rem medan kolumnen till vänster kommer att uppta det återstående utrymmet (minus mellanrummet).

Ibland kan man komma undan med att använda procentsatser. Men man måste använda dem på smarta sätt som ändå kan anpassa sig till situationen. Ofta innebär detta att para ihop dem med en fr värde.

Ett mer realistiskt exempel

Låt oss föreställa oss att du har en sida som består av huvudinnehållsområdet och en sida (för relaterade inlägg). Huvudinnehållsområdet tar upp tre delar av skärmen medan sidan tar upp det återstående utrymmet minus gapet:

.behållare {
bredd: 100%;
visa: rutnät;
rutnät-mall-kolumner: 3fr 1fr;
glipa: 1.5rem;
}
.kort {
bakgrundsfärg: #5A5A5A;
stoppning: 10px;
marginal-botten: .5rem;
}

Här är resultatet:

Vanligtvis skulle du flytta sidofältet (eller åt sidan) till botten (eller toppen) av sidan när skärmen blir för smal. Detta innebär att ställa in mediefrågor som staplar allt ovanpå varandra när visningsporten träffar en viss brytpunkt.

Så här kan du stapla allt i en kolumn när viewporten når 55em eller mindre:

@media(maximal bredd: 55 em) {
.behållare {
visa: böja;
flex-riktning: kolumn;
 }
}

Och resultatet kommer att se ut ungefär så här:

Nu vill du inte att varje kort ska sträcka sig över hela visningsportens bredd. Snarare bör korten visas sida vid sida. Det bästa sättet att uppnå detta är med CSS-rutnät. Men istället för att ställa in fasta breddvärden (som 50 %) för rutnät-mall-kolumnen, använd upprepa() fungerar enligt följande:

.sidebar-grid {
visa: rutnät;
rutnät-mall-kolumner: upprepa(automatisk passning, min Max(25rem, 1fr));
anpassa-innehåll: Start;
glipa: 2rem;
}

Denna CSS anger en minimistorlek på 25rem och en maximal storlek på 1fr. Det tillvägagångssättet är mycket bättre än att ställa in fasta bredder eftersom det är beroende av egen dimensionering. Med andra ord låter det webbläsaren räkna ut saker utifrån tillgängliga parametrar.

När du nu minskar webbläsarfönstret till en viss bredd, justeras rutnätsrutan automatiskt till två rutor per rad.

När skärmen blir mindre sjunker den till en ruta per rad. Så webbläsaren staplar allt ovanpå varandra. Allt detta händer när du ändrar storlek på fönstret. Du kan använda en webbläsarfunktion som Chrome DevTools för att förstå hur denna CSS fungerar, och hur storleksändring av fönstren ändrar layouten.

Det bästa är att du inte behöver en containerfråga eller något fint för att göra elementet responsivt. Ställ bara in ett rutnät och använd min Max() för att ställa in bråkvärden istället för fasta storlekar.

Lär dig mer om CSS Grid

Om du vill bli bra med CSS måste du ha djup kunskap om CSS Grids. Galler kan vara ganska kraftfulla när de används väl. Du kan uppnå nästan vilken layout du vill med hjälp av Grids. Detta gör det till ett oumbärligt verktyg i CSS.

En sak att tänka på när du använder CSS-rutnät är att fokusera på lyhördhet. Du kan också använda fraktionerad metod för att undvika fall av kollisioner mellan element. Kom ihåg att behärska CSS-rutnät eftersom layoutstilen kommer att hjälpa dig oerhört när du skapar webbplatser.