Een Verzameling van Interessante Feiten Over CSS Grid

0
34

Vorig jaar heb ik Een Collectie bijeen van Interessante Feiten over CSS Grid Lay-out na het geven van een workshop. Dit jaar werkte ik aan een andere workshop en ik heb geleerd wat meer spannende feiten over de lay-out spec we allemaal zo graag.

Natuurlijk, ik ben niet van plan om mijn kennis bij mezelf. Ik ben graag deel ik mijn bevindingen weer met u, de CSS-Tricks gemeenschap.

Inzicht in hoe de `grid` snelkoppeling werkt

Soms, lezen en begrijpen van delen van het raster—of eigenlijk elke andere—spec erg moeilijk kan zijn.

Bijvoorbeeld, het kostte me een tijdje om te begrijpen hoe het gebruik van het raster steno goed. De specificatie staat dat de geldige waarden zijn:

<‘raster-sjabloon’> | <‘raster-template-rijen’> / [ auto-flow && dicht? ] <‘raster-auto-kolommen’>? | [ auto-flow && dicht? ] <‘raster-autwo-rijen’>? / <‘raster-template-kolommen’>

U kan zinvol zijn als u de tijd neemt of als je ervaring hebt in het lezen van de specs. Ik probeerde verschillende combinaties en alle van hen is mislukt. Wat uiteindelijk hielp mij was een opmerking in de spec:

Opmerking u kunt alleen opgeven van de expliciete of impliciete grid eigenschappen in één raster-verklaring.

Rachel Andrew heeft een reeks van berichten die helpen verklaren hoe om te lezen van een specificatie, met behulp van CSS Grid als een voorbeeld.

Dus, kunnen we bepalen een veelheid van dingen met behulp van het raster steno, maar niet alle van hen in een keer. Hier zijn enkele voorbeelden.

Met behulp van de `grid` in het voordeel van `raster-sjabloon`

De grid-sjabloon eigendom is een verzamelnaam voor het instellen van raster-template-kolommen, raster-template-rijen, en raster-template-gebieden in één verklaring. Wij kunnen hetzelfde doen met de grid steno, dat is een beetje korter.

raster: “één op één” 200px
“twee van de vier”
“drie vier”
/ 1fr 2fr;

/* een verzamelnaam voor: */
/*
grid-template-gebieden: “één op één” “twee van de vier” “drie vier”;
grid-template-rijen: 200px;
grid-template-kolommen: 1fr 2fr;
*/

Dit shorthand maakt drie rijen en twee kolommen, met vier genoemd raster gebieden. De eerste rij heeft een expliciete hoogte van 200px, terwijl de tweede en de derde heeft een impliciete hoogte van de auto. De eerste kolom heeft een breedte van 1fr en de tweede een breedte van 2fr.

Zie de Pen raster steno – gebieden, expliciete rijen en kolommen door Manuel Matuzovic (@matuzo) op CodePen.

Wilt u meer weten over het verschil tussen een expliciete en een impliciete grid? Check dit bericht schreef ik over het onderwerp hier op CSS-Tricks.

Wij moeten niet opgeven gebieden als we ze niet nodig hebt. We kunnen gebruik maken van het raster steno net voor het definiëren van expliciete rijen en kolommen. De volgende twee fragmenten zijn in wezen hetzelfde te doen:

grid-template-rijen: 100px 300px;
grid-template-kolommen: 3fr 1fr;
raster: 100px 300px / 3fr 1fr;
Behandeling impliciete rijen en kolommen

Het is mogelijk gebruik te maken van de grid steno opgeven grid-auto-flow, maar het hoeft niet precies te werken zoals we zouden verwachten. We hebben niet alleen het toevoegen van de rij of kolom sleutelwoord ergens in de verklaring. In plaats daarvan moeten we gebruik maken van de auto-flow zoekwoord op de juiste kant van de streep.

Als het aan de linkerkant van de streep, de verkorte sets grid-auto-flow op rij en maakt expliciet kolommen.

raster: auto-flow / 200px 1fr;

/* een verzamelnaam voor: */
/*
grid-auto-flow: rij;
grid-template-kolommen: 200px 1fr;
*/

Als het aan de rechterkant van de streep, de verkorte sets grid-auto-flow kolom en maakt expliciet rijen.

raster: 100px 300px / auto-flow;

/* een verzamelnaam voor: */
/*
grid-template-rijen: 100px 300px;
grid-auto-flow: kolom;
*/

We kunnen ook de grootte van de impliciete tracks samen met de auto-flow trefwoord, die respectievelijk de zet raster-auto-rijen of raster-auto-kolommen op de opgegeven waarde.

raster: 100px 300px / auto-flow 200px;

/* een verzamelnaam voor: */
/*
grid-template-rijen: 100px 300px;
grid-auto-flow: kolom;
grid-auto-kolommen: 200px;
*/

Zie de Pen raster steno – expliciete rijen en impliciete columns van Manuel Matuzovic (@matuzo) op CodePen.

Functie-query ‘ s in de Rand

Het controleren van de ondersteuning voor CSS Grid werkt geweldig met zijn Voorzien van Query ‘s omdat alle browsers die het ondersteunen Raster begrijp ook voorzien van query’ s. Dit betekent dat wij kunnen controleren of een browser ondersteunt de oude of de nieuwe spec, of beide. Hebt u vragen? Te beginnen met de Rand van De 16, Edge biedt niet alleen ondersteuning voor de nieuwe specificatie, maar de oude, maar goed.

Dus, als je wilt om onderscheid te maken tussen de versies van de Edge ondersteuning voor de nieuwe spec en die dat niet doen, je hebt om te schrijven van uw query ‘ s zoals deze:

/* Rand van de 16 en hoger */
@ondersteunt (display: -ms-grid) en (display: grid) {
div {
breedte: auto;
}
}

/* Rand 15 en lager */
@ondersteunt (display: -ms-grid) en (niet (display: grid)) {
div {
marge: 0
}
}

Hier is een kleine handige demo, die toont welke functie query triggers in de browser geopend.

Zie de Pen display: grid ondersteuning test door Manuel Matuzovic (@matuzo) op CodePen.

Als een side-note, moet je niet overboord te gaan met de (mis)gebruik van de functie query ‘ s voor de browser sniffing, want browser detectie is slecht.

Het opgeven van het juiste aantal items per kolom

Grid is geweldig voor pagina lay-outs, maar het kan zeer nuttig zijn op component niveau. Een van mijn favoriete voorbeelden is de mogelijkheid om de exacte hoeveelheid van de items per kolom in een multi-kolom onderdeel.

Laten we zeggen dat we een lijst van 11 items en we willen toevoegen aan een nieuwe kolom na elke vierde item. Het eerste wat we willen doen na het instellen van display: raster op de ouder is de manier wijzigen waarop de grid auto-plaatsing-algoritme werkt. Standaard vult in elke rij, op zijn beurt, het toevoegen van nieuwe rijen als dat nodig is. Als we raster-auto-flow kolom raster vul elke kolom in plaats, dat is wat we willen. Het laatste wat we moeten doen is het aantal items per kolom. Dit is mogelijk door het definiëren van zo veel expliciete rijen zo nodig met behulp van het raster-template-rijen eigendom. Wij kunnen de hoogte van elke rij expliciet of net zo groot als hun inhoud met behulp van het sleutelwoord auto.

ul {
display: grid;
grid-template-rijen: auto auto auto auto;

/* of korter en makkelijker te lezen: */
/* grid-template-rijen: herhaal(4, auto); */
grid-auto-flow: kolom;
}

Als we het aantal items per kolom 5 zijn we gewoon een ander nummer aan de lijst of maken we gebruik van de repeat-notatie in plaats en verandert alleen de eerste parameter in op de gewenste waarde (raster-template-rijen: herhaal(5, auto)).

Zie de Pen Beperkt aantal items per kolom door Manuel Matuzovic (@matuzo) op CodePen.

Sticky voetteksten met CSS Grid

Er zijn vele manieren om te maken sticky voetteksten in CSS. Sommigen van hen zijn hacky en ingewikkeld, maar het is vrij eenvoudig met Raster.

Laten we zeggen dat we een *klassieke* kop, inhoud en voettekst van de pagina structuur.

<body>
<header>KOPTEKST</header>
<main></main>
<footer>VOETTEKST</footer>
</body>

Eerst stellen we de hoogte van de html en body aan tenminste 100% van de viewport te zorgen dat de pagina altijd gebruik van de volledige verticale ruimte. Dan passen we raster-template-rijen splitsen van het lichaam in drie rijen. De eerste (header) en de laatste (voettekst) rij kan hebben, ongeacht de grootte van we willen. Als we willen dat ze altijd zo groot zijn als hun inhoud, we eenvoudig instellen van de hoogte tot aan de auto. De rij in het midden (hoofd) moet altijd vullen de rest van de ruimte. We hebben niet voor het berekenen van de hoogte, omdat we gebruik kunnen maken van de fractie eenheid om dat te bereiken.

html {
height: 100%;
}

body {
min-height: 100%;
display: grid;
grid-template-rijen: auto 1fr auto;
}

Als een resultaat, het belangrijkste orgaan groeit en de voettekst automatisch aangepast en blijft op de bodem van de viewport.

Zie de Pen CSS Grid Lay-out Sticky Footer door Manuel Matuzovic (@matuzo) op CodePen.

Automatische minimale grootte van het raster items

Onlangs, Florian twitterde dat hij zich afvraagt waarom het afkappen van één regel tekst in een rooster item was zo ingewikkeld. Zijn voorbeeld illustreert een interessant feit over raster-items.

De uitgangssituatie is een drie-raster met een lid in elk rooster item.

<div class=”grid”>
<div class=”item”>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo ipsum exercitationem voluptate, autem veritatis enim soluta beatae odio accusamus molestiae, perspiciatis sunt maiores quam. Deserunt, aliquid inventore. Ullam, fugit uitspraken.
</p>
</div>
</div>
.raster {
display: grid;
grid-template-kolommen: herhaal(3, 1fr);
grid-gap: 20px;
}

Elk lid mag slechts één regel en een beletselteken aan het einde van de lijn als het lid langer is dan het bovenliggende item. Florian dat opgelost door het instellen van white-space te nowrap, waardoor een enkele lijn, het verbergen van overloop en de instelling text-overflow te weglatingsteken.

p {
white-space: nowrap;
overflow: hidden;
text-overflow: weglatingsteken;
}

Dit werkt prima op een blok-element, maar in dit rooster voorbeeld, de kolommen uit te breiden naar de breedte van de single-line lid:

Zie de Pen Automatische minimale grootte van het raster items door Manuel Matuzovic (@matuzo) op CodePen.

Algemeen gesproken gebeurt dit, omdat een rooster item kan niet kleiner zijn dan de kinderen. De standaard min-breedte van een raster-item (of flex-item) is ingesteld op auto, die volgens de spec:

…geldt een automatische minimum papierformaat in de opgegeven as raster items waarvan de overloop is zichtbaar en die span op zijn minst een track waarvan min track dimensionering van de functie auto.

Dit maakt het rooster en de flex-items meer flexibel, maar soms is het niet wenselijk dat de inhoud kunnen strekken de bovenliggende items breedte. Om te voorkomen dat we het kunnen veranderen van de overflow eigenschap van het raster-item om de iets andere dan die van zichtbaar of de min-width in op 0.

Zie de Pen Afkappen Tekst in CSS Grid door Manuel Matuzovic (@matuzo) op CodePen.

Lees meer over de Automatische Minimale Grootte van het Raster Items in het raster spec.

Inpakken

Hopelijk zijn deze recente afhaalrestaurants helpen u voelen zich meer comfortabel te schrijven en het gebruik van het Elektriciteitsnet als ze voor me. Er staan veel details in deze nieuwe specificatie, maar het wordt meer interessant en begrijpelijk met meer gebruiken.