Accentsconagua
Share
In deze zelfstudie zullen we verkennen hoe we een aantal verschillende webformulieren kunnen bouwen met behulp van CSS Grid. Voor elk voorbeeld gebruiken we eerst drijvers en zien we vervolgens hoe dezelfde lay-out kan worden gemaakt met CSS Grid.
Als je geen ervaring hebt met CSS-rasters, bekijk dan onze beginnersserie De CSS-gridlay-outmodule begrijpen. Laten we beginnen!
In deze lay-out gaan we het formulier in twee kolommen verdelen, zodat we de labels aan de linkerkant en de invoervelden aan de rechterkant kunnen weergeven.
Een traditionele benadering van deze lay-out kan zweven gebruiken om ons onze kolommen te geven. Merk op dat we geen omhulsel hebben voor het formulierelement; we zullen de labels en ingangen direct stijlen.
vorm overloop: verborgen; label float: links; breedte: 200 px; opvulling rechts: 24px; invoer float: links; breedte: berekend (100% - 200 px); -knop float: right; breedte: berekend (100% - 200 px);
U zult merken dat we gebruiken calc () hier, wat ons in staat stelt om onze linker kolom gefixeerd op 200px breed te maken, terwijl de rechterkolom vloeibaar blijft.
Hier is het resultaat, met enkele aanvullende stijlen voor esthetiek:
Ons doel bij het gebruik van "Grid" is om twee kolommen te definiëren en vervolgens elk element in de vereiste kolom te plaatsen.
De eerste stap is om ons raster te definiëren op het bovenliggende element het formulier:
vorm weergave: raster;
Vervolgens moeten we dat raster verdelen met roostervormige template-columns:
vorm weergave: raster; rooster-sjabloon-kolommen: 200px 1fr;
Op basis van bovenstaande CSS heeft de eerste kolom een vaste breedte van 200px terwijl de tweede zal duren 1FR ("Één breuk") van de resterende beschikbare ruimte.
We moeten nu de plaatsing definiëren voor onze labels en ingangen. Om dat te doen, zullen we gebruiken roostervormige kolom met specifieke waarden voor de rasterlijnen:
Voor meer informatie over hoe rasterlijnen werken, bekijkt u deze snelle tip:
Op basis van deze rasterlijnen zullen we de volgende regels toepassen voor onze labels, ingangen en de knop:
label grid-column: 1/2; input, knop grid-column: 2/3;
De labels bevinden zich in de kolom die begint op regel 1 en eindigt op regel 2. De ingangen en knoppen worden in de kolom geplaatst die begint op regel 2 en eindigt op regel 3.
Eindelijk gebruiken we roostervormige gap om een rugmarge van 16 px toe te voegen tussen de rijen en kolommen:
vorm weergave: raster; rooster-sjabloon-kolommen: 200px 1fr; grid-gap: 16px;
In deze lay-out willen we het volgende bereiken:
Het is perfect mogelijk om deze lay-out te bouwen met drijvers. We moeten echter een instellen min-height voor de linkerkolom, anders neemt hij niet de volledige hoogte aan. Er zijn andere 'traditionele' benaderingen van dit probleem, maar geen daarvan is bijzonder mooi.
Samengevat, met drijvers moeten we:
min-height naar de linkerkolom.overloop verborgen; om de wikkelhoogte te behouden.textarea en verzendknop, en laat ze dan de volle breedte vullen.Dat is best een beetje werk, toch??
Een betere aanpak zou zijn om dit op te lossen met Flexbox of Grid. In dit specifieke geval zou ik Grid liever gebruiken, omdat we elementen zowel horizontaal als verticaal rangschikken.
Laten we beginnen met het declareren van een raster op onze verpakking en het in twee kolommen verdelen.
.wrapper weergave: raster; rooster-sjabloon-kolommen: 1fr 2fr;
Ons formulierelement ook moet een raster worden verklaard:
vorm weergave: raster; rooster-sjabloon-kolommen: 1fr 1fr; grid-gap: 20px;
Na het toepassen van de bovenstaande regels, krijgen we het volgende:
We moeten de laatste twee elementen de volledige breedte laten vullen door ze uit te rekken van rasterlijn 1 tot rasterlijn 3.
.volledige breedte rasterkolom: 1/3;
Tijd voor onze laatste formulierlay-out. In dit voorbeeld hebben we een invoer toegevoegd voor gebruikers om hun profielfoto te uploaden. Het moet rechtsboven worden geplaatst.
We zullen dit bouwen met de volgende markup:
In het kort over een traditionele aanpak, kunnen we onze lay-out met deze stappen bereiken:
positie: relatief; naar het formulierelement.Laten we niet te veel stilstaan bij de traditionele aanpak. Met Grid zullen we het formulier als volgt in twee kolommen verdelen:
De eerste kolom neemt tweemaal de horizontale ruimte van de tweede kolom in beslag, die we zullen gebruiken fr units:
vorm weergave: raster; rooster-sjabloon-kolommen: 2fr 1fr; grid-gap: 20px;
Nadat het raster is vastgesteld, moeten we de formulierelementen plaatsen tussen rasterlijn 1 en rasterlijn 2:
vorm p grid-column: 1/2;
De volgende stap is om het invoerbestand in de tweede kolom te plaatsen. Om dit te doen, plaatsen we het tussen rasterlijn 2 en rasterlijn 3. Verticaal verplaatsen, we zorgen ervoor dat het rijen van rasterlijn 1 naar rasterlijn 2 overspant.
.input-file-wrapper grid-column: 2/3; rasterrij: 1/2;
Goed gedaan! We hebben verschillende voorbeelden behandeld voor het gebruik van CSS Grid bij het bouwen van webformulieren. Zoals je hebt gemerkt, hebben we veel tijd en moeite bespaard door enkele regels code te schrijven, in tegenstelling tot het gebruik van traditionele opmaaktechnieken. U kunt alle bovenstaande voorbeelden vanaf vandaag gebruiken, dankzij CSS @supports die ons helpen bij het gebruik van een specifieke functie als een verbetering.
Heeft u suggesties voor het verbeteren van deze lay-outs? Laat het me weten in de reacties hieronder!
