Snabbtips Nämn dina CSS-rader, bara i fallet

I varje CSS-nät har varje rad ett indexnummer som vi kan referera till att placera rutnät. Men vi kan också namnge var och en av dessa nätlinjer, vilket gör det enklare att arbeta med och behålla våra nätutformningar. Låt oss ta en titt!

Rutnätet kommer

Det vanligaste svaret på någon Grid-handledning är "men när kan jag använda det här?" Och det är en rättvis fråga. Faktum är: Grid är kommer, och det kommer snart vara här.

"CSS Grid kommer att bli standard för stöd i Chrome och Firefox i mars 2017." - Eric Meyer

Om du inte har tittat på det ännu, nu är det dags!

Rutnät nummer

När vi förklarar ett rutnät, får varje rad ett indexnummer: 

Notera: Om inte layouten är inställd med riktning: rtl;, dessa siffror börjar längst upp till vänster på rutnätet och arbetar längst ned till höger. 

Vi kan hänvisa till dessa nummer för att placera rutnät:

.objekt grid-column: 2; rutnät: 3; 

I det här exemplet vårt .Artikel elementet är placerat med början på kolumnlinjen 2 och radlinjen 3:

Explicit Grid Line Names

Med mer komplexa nät kan du tänka dig att referera allt efter nummer kan bli lite förvirrande. Av denna anledning tillåter Grid-modulen oss att uttryckligen namnge våra rader när vi förklarar våra rutnätkolumner och rader.

Låt oss använda ett exempel som de vi har använt i hela serien. Här är vår grundläggande 3 × 3 nätdeklaration:

.rutnät 1 display: rutnät; gallermall-kolumner: 100px auto 100px; raster-mall-rader: 60px 130px 50px; gallergap: 20px; 

Nu kan vi paketera våra kolumn- och radvärden med radnamn (oavsett vad vi vill ha), med hjälp av fältparametrar:

.rutnät 1 display: rutnät; rutnätmall-kolumner: [start] 100px [center-start] auto [sista kolumnstart] 100px [finish]; raster-mall-rader: [header-start] 60px [huvudstart] 130px [huvudänden] 50px [rad-slutet]; gallergap: 20px; 

Vi kan nu placera objekt med namn, istället för nummer:

.objekt grid-column: center-start; rutnät: header-start; 

Några tips:

• Dessa namn kan skräddarsys efter dina egna beskrivande behov, så tänk logiskt om vad som hjälper dig att känna igen och komma ihåg områden i rutnätet.
• De ursprungliga linjenummerna förblir i drift, så du kan fortfarande använda dem.
• Du kan deklarera flera namn för en rad, till exempel: [main-end footer-start row-5] etc.
• Även om du namnger dina nätlinjer, är du inte skyldig att använda dem, så det är en bra "just in case" vana att komma in i.

Implicita rutnätnamn

När vi medvetet gör saker, som namngivna rutnät, sägs det vara explicit. När något är underförstått, men inte direkt angivet, så kallas det implicit. Vi har tagit uttryck för namngivning av rutnät, men det finns också omständigheter där linjerna är namngivna.

Du kan komma ihåg från en tidigare handledning att det är möjligt att definiera rutnätområden.

Vi kan definiera fyra rutnätområden så här:

.rutnät-1 / * ... befintliga format * / galler-mall-områden: "header header header" "main main sidebar" "footer footer footer"; 

Detta ger oss följande:

Namnge ett rutnätområde rubrik Tilldelar automatiskt namn till dess fyra gränslinjer också. Raden linjer runt det blir header-start och header-end, och även de två kolumnlinjerna blir också header-start och header-end. Detsamma gäller för de övriga områdena, vilka anges för namnnamn main-start, main-end, sidofält-start och så vidare.

Notera: Titta på saker i omvända, uttryckligen lägga till namngivna linjer i samma format (header-start och header-end) skapar ett namnigt rutnätområde av rubrik. 

Vi kan använda dessa radnamn precis som vi tidigare, för att placera objekt. Och återigen finns de förutom några namn du definierar själv och de ursprungliga linjens indexnummer.

Slutet på linjen

Det är det för det här snabba tipset! Kom ihåg: använd vana att namnge dina linjer och områden för enklare näthantering och underhåll.