Enkel Heter Grid-Områden

0
19

Jag tänker på heter grid-områden i CSS-Nät som bring-your-own syntaktiskt socker. Att du inte absolut behöver dem (du kan uttrycka nätet placering på andra sätt), men det kan göra att placeringen mer intuitivt. Och, hey, om jag har fel om det, rätta mig i kommentarerna.

Säg att du satt upp en 3-kolumnen nätet:

.grid {
display: nätet.
grid-gap: 1rem;
grid-template-kolumner:
200px 1fr 1fr;
}

Inga rader definierat det, de är implicita och kommer att visas som behövs. Vi skulle kunna definiera dem, vi är bara inte, eftersom som de flesta situationer i webb-design, att vi inte bryr hur lång objekt — höjden kommer att växa som behövs för att passa innehållet.

Nu, hur gör vi plats för något i den allra översta-vänstra positionen på nätet? Vi kunde berätta nätet för att placera det där som denna:

.item {
grid-kolumn: 1 / 2; /* börja på den första galler column linje och slutet på den andra */
}

Det fungerar, även om det .artikel bättre att vara första barn .rutnät. Annars, något annat kan implicit placeras där .artikel kommer att sparka ner till nästa öppna rad. Om vi ville vara super noga med att placera den i övre vänstra vi kunde göra den raden också:

.item {
grid-kolumn: 1 / 2;
grid-rad: 1 / 2;
}

Nu kommer det att vara i det övre vänstra säker, även om andra objekt är uttryckligen placeras där (de ska bara överlappar varandra). Vi kan även förkorta upp saker och ting med grid-område fastigheten:

.item {
grid-området: 1 / 1 / 2 / 2;
}

Alla de 1: or och 2: or kan vara intuitiv nog för nu, men siffrorna blir lite mycket i mer komplexa nät som omfattar både kolumn och rad placering.

Kolla in det här. Samtidigt som vi definierar kolumner, vi kan namnge dem med en separat egendom:

.grid {
display: nätet.
grid-gap: 1rem;
grid-template-kolumner:
200px 1fr 1fr;
grid-template-områden:
“pro a b]”
“pro c d”;
}

Varje citerade grupp i grid-template-områden är en rad. Inuti är de namn jag har precis gjort upp. Kan vara precis vad som helst, så länge det passar dig. Se hur ordet “pro” är upprepade det två gånger på två rader? Det är viktigt, som det är att säga att vi skulle kunna placera ett rutnät punkt där värdet “pro” är och kommer att vara i den första av tre kolumner och sträcker sig över två rader. Ganska intuitivt, ja?

Vi placerar det så här:

.pro-funktioner {
/* istället */
grid-området: 1 / 1 / 2 / 3;
/* nu kan vi göra */
grid-område: pro;
}

Här är det enkelt exempel:

Se Pennan Enkelt som Heter Grid-Områden av Chris Coyier (@chriscoyier) på CodePen.

Vill du få ännu mer beskrivande med ett rutnät? Prova att dra i dina kommentarer i CSS.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men den sociala dela länkar ovan, säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sättande till sociala nätverk, och mycket mer!