Leuke Tijden Met De Dimensionering Van Raster Elementen

0
127

Chris toonde ons een tijdje terug dat CSS grid gebieden en hun elementen zijn niet noodzakelijk dezelfde grootte. Het is een interessant punt, omdat men zou kunnen veronderstellen dat het plaatsen van zaken in een raster zou maken die dingen bezetten de hele ruimte, maar raster gebieden daadwerkelijk reserveren van de ruimte bepaald door de grid en zet het element rechtvaardigen-de inhoud en de lijn-items eigenschappen van een stretch waarde standaard.

Dus… ja, ze zijn van dezelfde grootte, maar niet noodzakelijk.

Chris eindigde zijn post met de vraag “who cares?”, terwijl dat aangeeft dat er geen één in het bijzonder. Het punt was veel meer gericht op het oproepen van deze als een startpunt voor mensen die moeten uitlijnen content in het raster.

Ik weet niet of ik een beter antwoord, maar het deed me denken dat het leuk zou zijn als we zouden kunnen benutten die automatisch toegewezen stretch-waarden aanpassen van een user interface op een interessante manier.

Ik zeg niet dat een van deze use cases. In feite, kunnen ze ronduit dom. Dat zei, misschien kunnen ze het uitgangspunt voor andere ideeën.

Het Uitrekken Van Formulier Velden

Een idee is om toe te voegen sommige interactie aan formuliervelden. Als de <form> is het raster container dan kunnen we tekst ingangen waar ze beginnen op hun standaard breedte aan de hand van de waarde start en vervolgens uit te breiden naar de volledige breedte van de container door te schakelen naar de stretch waarde op een :focus staat:

.raster__formulier {
display: grid;
}

.raster__input {
rechtvaardiging-zelf: start;
}

.raster__input:focus {
rechtvaardiging-zelf: stretch;
}

Zie de Pen CSS Grid: Grid Kind Stretch op Focus door Geoff Graham (@geoffgraham) op CodePen.

Nogmaals, we kunnen al iets soortgelijks doen met Flexbox maar met het voordeel van de flex wordt een geanimeerde eigendom:

Zie de Pen Flexbox: Kind Stretch op Focus door Geoff Graham (@geoffgraham) op CodePen.

Ik weet eerlijk gezegd niet zeker waar het uitbreiden van formuliervelden op focus zou maken voor de grote UX maar het is zeker leuk om te spelen met.

Gordijn Openen Effect Re-Bezocht

We posted a good ol’ fashioned CSS truc vorig jaar dat gebruik maakt van de checkbox hack te maken om het effect van een gordijn opening te onthullen achter.

Zie de Pen OXJMmY door Geoff Graham (@geoffgraham) op CodePen.

Die gebruikt breedtes en positionering te verplaatsen van dingen om op te klikken, maar we konden hebben iets soortgelijks gedaan met een Raster. Nogmaals, dit is minder robuust door het ontbreken van animatie en het niet toestaan van het gordijn volledig open is, maar het laat wel zien hoe we gebruik kunnen maken van het traject, de begin-en eindwaarden van een raster-element en de dimensionering van een aantal interessante ideeën.

Zie de Pen CSS Grid Gordijn Onthullen door Geoff Graham (@geoffgraham) op CodePen.

Wat Anders?

Het feit dat raster elementen zijn niet altijd de grootte van het raster is een mooie tip om te houden in onze rug s als we de ontwikkeling van lay-outs. Ik durf te wedden dat we kunnen komen tot meer ideeën om dat concept naar een ander niveau en plezier te hebben met het als een groep. Deel ’em als je ’em!