Roliga Tider Med Dimensionering Nätet Element

0
99

Chris visade oss ett litet tag tillbaka att CSS-grid-områden och deras element är inte nödvändigtvis samma storlek. Det är en intressant synpunkt, eftersom man kan anta att sätta saker i ett rutnät område som skulle göra dessa saker upptar hela utrymmet, men rutnät områden faktiskt reservera plats som definieras av nätet och ange elementets motivera-innehåll och anpassa-objekt fastigheter till en sträcka värde som standard.

Så… ja, de är samma storlek, men inte nödvändigtvis.

Chris avslutade sitt inlägg med att fråga “vem bryr sig?”, samtidigt som ingen i synnerhet. Det var mycket mer inriktad mot att kalla detta som en utgångspunkt för folk som behöver för att anpassa innehållet på nätet.

Jag är inte säker på att jag har ett bättre svar, men det fick mig att tänka att det skulle vara kul om vi skulle kunna utnyttja dessa för auto-inkomster sträcka värden att anpassa ett gränssnitt, som på ett intressant sätt.

Jag säger inte att någon av dessa är bra att använda fall. I själva verket kan de vara rent av dumt. Som sagt, kanske de kan vara en utgångspunkt för andra idéer.

Stretching Formulärfält

En idé är att lägga till några av samspelet mellan fälten. Om vår <form> är nätet container så kan vi sms: a ingångar där de börjar på sin standard bredd med hjälp av start-värdet och sedan utvidga dem till den fulla bredden av behållaren genom att byta till den sträcka värdet på :fokusera status:

.grid__form {
display: nätet.
}

.grid__input {
motivera-self: börja;
}

.grid__input:focus {
motivera-self: sträcka;
}

Se Pennan CSS Nätet: Nätet Barn Sträcka på Fokus av Geoff Graham (@geoffgraham) på CodePen.

Sedan igen, kan vi redan nu göra något liknande med Flexbox men med fördelen av flex är en animerad egendom:

Se Pennan Flexbox: Barn Sträcka på Fokus av Geoff Graham (@geoffgraham) på CodePen.

Jag är ärligt talat inte säker på var att utöka fälten på fokus skulle göra för stora UX men det är verkligen kul att leka med.

Gardin Ingående Effekt Re-Visited

Vi skrev en good ol’ fashioned CSS-trick förra året som använder kryssrutan hack för att skapa effekten av en gardin öppnar för att avslöja innehållet bakom det.

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

Som används bredd och placering för att flytta runt saker på klicka, men vi kunde ha gjort något liknande med Grid. Återigen, detta är mindre robust eftersom det saknar animation och inte låta gardinen för att öppna helt, men det visar hur vi kan dra nytta av den sträcka, som börjar och slutar värden av ett rutnät element och dess dimensionering för att uppnå några intressanta idéer.

Se Pennan CSS Nätet Gardin Avslöja av Geoff Graham (@geoffgraham) på CodePen.

Vad Annars?

Det faktum att nätet element är inte alltid storleken på rutnätet är ett bra tips att hålla i vår rygg s som vi utvecklar layouter. Jag skulle satsa på att vi kan komma med fler idéer att ta detta koncept till en annan nivå och ha kul med det som en grupp. Andel ’em om du har ’em!