Morsomme Tider Med Dimensjonering Rutenett Elementer

0
16

Chris viste oss en liten stund tilbake at CSS rutenett områder og deres elementer er ikke nødvendigvis den samme størrelsen. Det er et interessant poeng, fordi man kan anta at det å sette ting inn i et rutenett området ville gjøre de tingene som opptar hele plassen, men rutenett områder faktisk forbeholder oss plass definert av rutenettet og still inn elementets rettferdiggjøre-innhold og juster-elementer egenskaper til en strekning verdi som standard.

Så… ja, de er samme størrelse, men ikke nødvendigvis.

Chris avsluttet sitt innlegg med å spørre “hvem bryr seg?” mens indikerer ikke en bestemt person. Poenget var mye mer rettet mot å kalle dette ut som et utgangspunkt for folk som trenger å justere innhold i nettet.

Jeg er ikke sikker på at jeg har et bedre svar, men det fikk meg til å tenke det ville være morsomt om vi kunne utnytte de automatisk tildelt strekke verdier til å tilpasse brukergrensesnittet på interessante måter.

Jeg sier ikke at noen av disse er flotte å bruke tilfeller. Faktisk kan de være direkte dumt. Når det er sagt, kanskje de kan være utgangspunkt for andre ideer.

Stretching Feltene

En idé er å legge til noen interaksjon til skjemafelt. Hvis vår <form> er rutenett container deretter kan vi sette tekst innganger hvor de starter på sine standard bredde ved hjelp av start-verdien og deretter utvide dem til full bredde av beholderen ved å bytte til strekningen verdi på en :fokus state:

.grid__form {
visning: rutenett;
}

.grid__input {
rettferdiggjøre selv: start;
}

.grid – __ – inngang:fokus {
rettferdiggjøre selv: strekk;
}

Se Penn CSS Nettet: Rutenett Barnet Strekke på Fokus ved Geoff Graham (@geoffgraham) på CodePen.

Så igjen, vi kan allerede gjøre noe lignende med Flexbox, men med den fordelen av flex er en animert eiendom:

Se Penn Flexbox: Barnet Strekke på Fokus ved Geoff Graham (@geoffgraham) på CodePen.

Jeg er ærlig talt ikke sikker på hvor utvide skjemafelt på fokus ville gjøre for store UX men det er absolutt morsomt å spille med.

Gardin Åpning Effekt Re-Besøkte

Vi postet et gode gamle fashioned CSS lure siste år som bruker avmerkingsboksen hack for å skape effekten av en gardin åpning for å avsløre innhold bak det.

Se Penn OXJMmY av Geoff Graham (@geoffgraham) på CodePen.

Det som brukes bredder og posisjonering for å flytte rundt på ting på klikk, men vi kunne ha gjort noe lignende med Rutenett. Igjen, dette er mindre robust fordi det mangler animasjon og ikke la teppet til helt åpen, men den viser hvordan vi kan utnytte strekningen, start-og slutt-verdier i et rutenett elementet og dens dimensjonering for å oppnå noen interessante ideer.

Se Penn CSS Rutenett Gardin Avsløre av Geoff Graham (@geoffgraham) på CodePen.

Hva Annet?

Det faktum at grid-elementer er ikke alltid størrelsen på nett-området er et fint tips for å holde på våre tilbake s som vi utvikler oppsett. Jeg vil satse vi kan komme opp med flere ideer å ta med at konseptet til et nytt nivå og ha det gøy med det som en gruppe. Andel ’em hvis du har ’em!