Eenvoudig Met De Naam Raster Gebieden

0
20

Ik denk dat van de naam raster gebieden in CSS Grids als bring-your-own syntactische suiker. Je hoeft niet echt nodig (je kon express rooster plaatsing op andere manieren), maar het kan ervoor zorgen dat de plaatsing van meer intuïtief. En, hey, als ik het mis heb, corrigeer me in de comments.

Zegt u het opzetten van een 3-raster:

.raster {
display: grid;
grid-gap: 1rem;
grid-template-kolommen:
200px 1fr 1fr;
}

Geen rijen gedefinieerd; deze zijn impliciet en wordt weergegeven als dat nodig is. We kunnen definiëren, we zijn gewoon niet, want net als de meeste situaties in web design, kan ons niet schelen hoe lang de items zijn: — de hoogte zal groeien als nodig is om de inhoud.

Nu, hoe doen we iets in die top-positie links in het rooster? We konden vertellen het raster te plaatsen het er zoals dit:

.item {
grid-kolom: 1 / 2; /* start bij de eerste raster kolom lijn en eindigt bij de tweede */
}

Dat werkt, hoewel dat .item beter worden het eerste kind .grid. Anders, iets anders kan impliciet worden geplaatst en er .item zal kick-down naar de volgende rij openen. Als we wilden super ervoor om het in de top-links, we kunnen het doen op de rij:

.item {
grid-kolom: 1 / 2;
grid-rij: 1 / 2;
}

Nu zal het in de top-links voor te zorgen, zelfs als nog andere items zijn expliciet (ze zullen gewoon overlap). We kunnen zelfs verkorten dingen met de grid-oppervlakte woning:

.item {
grid-gebied: 1 / 1 / 2 / 2;
}

Al die 1’s en 2’s kan worden intuïtief genoeg voor nu, maar de cijfers een beetje te veel van het in meer complexe roosters waarbij zowel kolom-en rij-plaatsing.

Check dit. Terwijl we definiëren de kolommen, kunnen we de naam van hen met een aparte eigenschap:

.raster {
display: grid;
grid-gap: 1rem;
grid-template-kolommen:
200px 1fr 1fr;
grid-template-gebieden:
de “pro”
“pro c d”;
}

Elke beursgenoteerde groep in raster-template-gebieden is een rij. In zijn namen die ik net gemaakt. Kon gewoon over alles, zolang het voor u zin heeft. Zie hoe het woord “pro” herhaald wordt er twee keer op twee rijen? Dat is belangrijk, want het is te zeggen dat we een rooster item waar die waarde van “pro” en het zal zijn in de eerste drie kolommen en overspant twee rijen. Vrij intuïtief, ja?

Wij plaatsen het als volgt:

.pro-functies {
/* in plaats van */
grid-gebied: 1 / 1 / 2 / 3;
/* we kunnen nu doen */
grid-omgeving: pro;
}

Hier is die eenvoudig voorbeeld:

Zie de Pen Eenvoudig met de Naam Raster Gebieden van Chris Coyier (@chriscoyier) op CodePen.

Wilt u nog meer beschrijvende met een rooster? Probeer te tekenen in je CSS opmerkingen.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de social sharing links boven, beveiliging en back-ups, Markdown ondersteuning, site search, het reactieformulier, positionering, sociale netwerk-verbindingen, en meer!