CSS-rasterindeling Gebruik van minmax ()

De CSS grid lay-outmodule neemt responsief ontwerp naar een hoger niveau door een nieuwe vorm van flexibiliteit dat was nog nooit eerder gezien. Nu kunnen we niet alleen definieer aangepaste roosters razendsnel alleen met pure CSS, maar de CSS Grid heeft dat ook veel verborgen juweeltjes waarmee we het raster verder kunnen aanpassen en ingewikkelde lay-outs kunnen realiseren.

De MinMax () functie is een van deze minder algemeen bekende functies. Het maakt het mogelijk om de grootte van een rasterspoor te definiëren minimaal tot maximaal bereik zodat het raster zich op de best mogelijke manier kan aanpassen aan het kijkvenster van elke gebruiker.

Syntaxis

De syntaxis van de MinMax () functie is relatief eenvoudig, het duurt twee argumenten: een minimum- en een maximumwaarde:

 minmax (min, max) 

De min waarde moet kleiner zijn dan de max, anders- max wordt genegeerd door de browser.

We kunnen de gebruiken MinMax () functioneren als de waarde van de roostervormige template-columns of roostervormige template-rijen eigendom (of beide). In ons voorbeeld gebruiken we de eerste, omdat dit een veel frequenter gebruiksscenario is.

 .container weergave: raster; rooster-sjabloon-kolommen: minmax (100px, 200px) 1fr 1fr; rooster-sjabloon-rijen: 100px 100px 100px; grid-gap: 10px;  

In de onderstaande demo van Codepen vindt u de HTML- en CSS-code we zullen het hele artikel gebruiken.

We kunnen gebruiken verschillende soorten waarden binnen in de MinMax () functie, alles hangt af van wat voor soort aangepast raster we willen creëren.

Statische lengtewaarden

Er zijn twee basismanieren waarop we het kunnen gebruiken MinMax () functie met statische lengtewaarden.

Ten eerste kunnen we gebruiken MinMax () alleen voor één rasterkolom en definieer de breedte van de andere kolommen als eenvoudige statische waarden (pixels hier).

 rooster-sjabloon-kolommen: minmax (100px, 200px) 200px 200px; 

Op de onderstaande GIF-demo kun je zien dat deze lay-out is niet ontvankelijk, maar de eerste kolom heeft enige flexibiliteit. De tweede en de derde kolom behouden hun vaste breedte (200 px), terwijl de eerste kolom varieert van 100 px tot 200 px, gebaseerd op de beschikbare ruimte.

Ten tweede kunnen we de breedte van definiëren meer dan één rasterkolom gebruik makend van MinMax (). De min- en max-waarden zijn beide statisch, dus het raster is standaard niet ontvankelijk. De kolommen zelf zijn dat echter wel flexibele, maar alleen tussen 100px en 200px. Ze tegelijkertijd groeien en krimpen als we de viewport-grootte veranderen.

 rooster-sjabloon-kolommen: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Merk op dat we dat ook kunnen gebruik de herhaling() functie samen met MinMax (). Het voorgaande codefragment kan dus ook als volgt worden geschreven:

 rooster-sjabloon-kolommen: herhaling (3, minmax (100px, 200px)); 

Dynamische lengtewaarden

Afgezien van statische waarden, is de MinMax () functie accepteert ook percentage eenheden en de nieuwe fractie (fr) eenheid als argumenten. Door ze te gebruiken, kunnen we aangepaste rasters realiseren die beide zijn sympathiek en verander hun afmetingen volgens de beschikbare ruimte.

De onderstaande code resulteert in een raster waarin de breedte van de eerste kolom varieert tussen 50% en 80% terwijl de tweede en de derde deel de resterende ruimte gelijkmatig.

 rooster-sjabloon-kolommen: minmax (50%, 80%) 1fr 1fr; 

Wanneer we dynamische waarden gebruiken met de MinMax () functie, het is cruciaal om een regel die logisch is. Laat me je een voorbeeld tonen waar de raster valt uit elkaar:

 rooster-sjabloon-kolommen: minmax (1fr, 2fr) 1fr 1fr; 

Deze regel is niet logisch, zoals de browser is niet in staat om te beslissen welke waarde toe te wijzen aan de MinMax () functie. De minimumwaarde zou leiden tot een 1fr 1fr 1fr kolombreedte, terwijl het maximum naar 2fr 1fr 1fr. Maar beide zijn mogelijk, zelfs op een heel klein scherm. er is niets waar de browser zich mee kan identificeren.

Dit is het resultaat:

Combineer statische en dynamische waarden

Het is ook mogelijk om combineer statische en dynamische waarden. In de bovenstaande demo van Codepen gebruikte ik bijvoorbeeld de minmax (100px, 200px) 1fr 1fr; regel die resulteert in een raster waarbij de eerste kolom varieert tussen 100px en 200px en de resterende ruimte is gelijk verdeeld tussen de andere twee.

 rooster-sjabloon-kolommen: minmax (100px, 200px) 1fr 1fr; 

Het is interessant om te zien dat naarmate de viewport groter wordt, de eerste kolom eerst van 100 px naar 200 px groeit. De andere twee, geregeerd door de fr-eenheid, beginnen te groeien pas nadat de eerste zijn maximale breedte had bereikt. Dit is logisch, omdat het doel van de fractie-eenheid is om de beschikbare (resterende) ruimte op te splitsen.

De min-inhoud, max-inhoud, en auto trefwoorden

Er is een derde soort waarde we kunnen toewijzen aan de MinMax () functie. De min-inhoud, max-inhoud, en auto sleutelwoorden relateren de dimensies van een rasterspoor aan de inhoud die het bevat.

max-inhoud

De max-inhoud trefwoord stuurt de browser die de rasterkolom moet zijn zo breed als het breedste element dat het bevat.

Op de onderstaande demo heb ik een geplaatst 400px-brede afbeelding in het eerste rastergedeelte en gebruikte de volgende CSS-regel (je kunt een Codepen-demo vinden met de volledige gewijzigde code aan het einde van het artikel):

 .container grid-template-columns: max-inhoud 1fr 1fr; / ** * Hetzelfde met de notatie minmax (): * rooster-sjabloon-kolommen: minmax (max-content, max-content) 1fr 1fr; * / 

Ik heb het niet gebruikt MinMax () notatie tot nu toe, maar in de bovenstaande codecommentaar kunt u zien hoe dezelfde code eruit zou zien (hoewel het hier overbodig is).

Zoals u kunt zien, is de eerste rasterkolom even breed als het breedste element (hier de afbeelding). Op deze manier kunnen gebruikers altijd de afbeelding zien op ware grootte. Echter, onder een bepaalde viewport-grootte is deze lay-out niet ontvankelijk.

min-inhoud

De min-inhoud trefwoord geeft de browser door dat de rasterkolom even breed moet zijn als de smalste element dat het bevat, op een manier dat leidt niet tot een overloop.

Laten we eens kijken hoe de vorige demo met de afbeelding eruit ziet als we de waarde van de eerste kolom wijzigen in min-inhoud:

 .container grid-template-columns: min-content 1fr 1fr; / ** * Hetzelfde met de notatie minmax (): * rooster-sjabloon-kolommen: minmax (min-inhoud, min-inhoud) 1fr 1fr; * / 

Ik liet de groene achtergrond onder de afbeelding zodat je de volledige grootte van de eerste rastercel kunt zien.

Zoals u kunt zien, behoudt de eerste kolom de kleinste breedte die kan worden bereikt zonder een overloop. In dit voorbeeld wordt dit gedefinieerd door de minimale breedte van de 4e en 7e rastercellen, die voortkomen uit de vulling en lettertypegrootte eigenschappen, als de afbeelding in de eerste cel kan worden teruggebracht tot nul zonder een overloop.

Als de rastercel een tekstreeks bevat, min-inhoud zou zijn gelijk aan de breedte van het langste woord, want dat is het kleinste element dat niet verder kan worden gekrompen zonder een overloop. Hier is een geweldig artikel van BitsOfCode waar je kunt zien hoe min-inhoud en max-inhoud gedragen zich wanneer de rastercel een tekstreeks bevat.

Gebruik makend van min-inhoud en max-inhoud samen

Als wij gebruik min-inhoud en max-inhoud samen binnen in de MinMax () functie krijgen we een rasterkolom die:

1. is responsief
2. heeft geen overloop
3. wordt niet breder dan het breedste element

 .container rooster-sjabloon-kolommen: minmax (min-inhoud, max-inhoud) 1fr 1fr;  

We kunnen ook de min-inhoud en max-inhoud trefwoorden samen met andere lengtewaarden binnen in de MinMax () functie, totdat de regel zinvol is. Bijvoorbeeld, minmax (25%, max-inhoud) of minmax (min-inhoud, 300px) zouden beide geldige regels zijn.

auto

Ten slotte kunnen we ook de auto trefwoord als een argument van de MinMax () functie.

Wanneer auto is gebruikt als een maximum, de waarde is identiek aan max-inhoud.

Wanneer het gebruikt als een minimum, de waarde ervan wordt aangegeven door de min-width / min-height regel, wat betekent dat auto is soms identiek aan min-inhoud, maar niet altijd.

In ons vorige voorbeeld, min-inhoud is gelijk aan auto, omdat de minimale breedte van de eerste rasterkolom altijd kleiner is dan de minimale hoogte. Dus de bijbehorende CSS-regel:

 .container rooster-sjabloon-kolommen: minmax (min-inhoud, max-inhoud) 1fr 1fr;  

zou ook zo kunnen worden geschreven:

 .container grid-template-columns: minmax (auto, auto) 1fr 1fr;  

De auto trefwoord kan ook zijn gebruikt in combinatie met andere statische en dynamische eenheden (pixels, fr eenheid, percentages, etc.) in de MinMax () functie, bijvoorbeeld minmax (auto, 300px) zou een geldige regel zijn.

Je kunt testen hoe het min-inhoud, max-inhoud, en auto trefwoorden werken met de MinMax () functie in de volgende Codepen-demo: