CSS Grid Layout Hur man använder minmax ()
De CSS Grid Layout Module tar responsiv design till nästa nivå genom att introducera a ny typ av flexibilitet det sågs aldrig tidigare. Nu kan vi inte bara definiera anpassade nät flammande snabbt enbart med ren CSS, men CSS-nätet har också många dolda pärlor som tillåter oss att ytterligare justera nätet och uppnå komplicerade layouter.
De min Max() fungera är en av dessa mindre kända funktioner. Det gör det möjligt att definiera storleken på ett nätspår som ett minimum till maximal räckvidd så att nätet kan anpassa sig till användarens visningsport på bästa möjliga sätt.
Syntax
Syntaxen av min Max() funktionen är relativt enkel, det tar det två argument: ett minimum och ett maximalt värde:
minmax (min, max)
De min värde måste vara mindre än max, annat max ignoreras av webbläsaren.
Vi kan använda min Max() fungera som värdet av grid-template-kolonner eller grid-template-rader egendom (eller båda). I vårt exempel använder vi den förra, eftersom det är ett mycket vanligare användarfall.
.behållare display: rutnät; rutmall-kolumner: minmax (100px, 200px) 1fr 1fr; raster-mall-rader: 100px 100px 100px; gallergap: 10px;
I Codepen demo nedan kan du hitta HTML och CSS-kod vi ska använda hela artikeln.
Vi kan använda olika slags värden inuti min Max() funktion beror allt på vilken typ av anpassat rutnät vi vill skapa.
Statiska längdvärden
Det finns två grundläggande sätt hur vi kan använda min Max() fungera med statiska längdvärden.
För det första kan vi använda min Max() endast för en rutnätskolonn och definiera bredden på de andra kolumnerna som enkla statiska värden (pixlar här).
rutmall-kolumner: minmax (100px, 200px) 200px 200px;
På gif demo nedan kan du se att denna layout är inte lyhörd, men den första kolumnen har viss flexibilitet. Den andra och tredje kolumnen behåller sin fasta bredd (200px) medan den första kolumnen sträcker sig från 100px till 200px, baserat på ledigt utrymme.
För det andra kan vi definiera bredden på mer än en rutnätskolonn använder sig av min Max(). Min och max värden är båda statiska, så som standard är nätet inte lyhörd. Men kolumnerna själva är flexibel, men bara mellan 100px och 200px. De växa och krympa samtidigt som vi ändrar visningsportstorleken.
rutnät-kolumner: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px);
Observera att vi också kan Använd upprepa() fungera hänger med min Max(). Så det tidigare kodstycket kan också skrivas så här:
rutmall-kolumner: upprepa (3, minmax (100px, 200px));
Dynamiska längdvärden
Förutom statiska värden, min Max() funktion accepterar också procentenheter och den ny fraktion (fr) enhet som argument. Genom att använda dem kan vi uppnå anpassade rutor som båda är mottaglig och ändra sina dimensioner enligt ledigt utrymme.
Koden nedan resulterar i ett rutnät där bredden på den första kolumnen sträcker sig mellan 50% och 80% medan den andra och den tredje dela jämnt det återstående utrymmet.
rutmall-kolumner: minmax (50%, 80%) 1fr 1fr;
När vi använder dynamiska värden med min Max() funktion, är det viktigt att skapa en regel som är meningsfullt. Låt mig visa dig ett exempel där gallret faller ifrån varandra:
rutmall-kolumner: minmax (1fr, 2fr) 1fr 1fr;
Denna regel har ingen mening, eftersom webbläsaren är oförmögen att bestämma vilket värde att tilldela till min Max() fungera. Minsta värdet skulle leda till a 1fr 1fr 1fr kolumn bredd, medan maximalt till 2fr 1fr 1fr. Men båda är möjliga även på en mycket liten skärm. Det finns inget webbläsaren kan relatera till.
Här är resultatet:
Kombinera statiska och dynamiska värden
Det är också möjligt att kombinera statiska och dynamiska värden. Till exempel i Codepen demo ovan använde jag minmax (100px, 200px) 1fr 1fr; regel som resulterar i ett rutnät där den första kolumnen sträcker sig mellan 100px och 200px och det återstående utrymmet är jämnt fördelat mellan de två andra.
rutmall-kolumner: minmax (100px, 200px) 1fr 1fr;
Det är intressant att observera att när utsikten växer först växer den första kolumnen från 100px till 200px. De andra två som styrs av fr-enheten börjar växa först efter det att den första nått sin maximala bredd. Detta är logiskt, eftersom fraktionsenhetens mål är att dela upp det tillgängliga (återstående) utrymmet.
De min-halt, max-innehåll, och bil nyckelord
Det finns en tredje typ av värde vi kan tilldela oss min Max() fungera. De min-halt, max-innehåll, och bil nyckelord relaterar dimensionerna för ett rutnät till innehåll det innehåller.
max-innehåll
De max-innehåll nyckelord styr webbläsaren som nätkolumnen måste vara så bred som det bredaste elementet den innehåller.
På demon nedan lade jag en 400px bred bild inuti det första rutnätet och använde följande CSS-regel (du kan hitta en Codepen-demo med den fullständiga ändrade koden i slutet av artikeln):
.behållare galler-mall-kolumner: max-innehåll 1fr 1fr; / ** * Samma med minmax () notering: * galler-mall-kolumner: minmax (max-innehåll, max-innehåll) 1fr 1fr; * /
Jag har inte använt min Max() notation än, men i kodkommentaren ovan kan du se hur samma kod skulle se ut med det (även om det är överflödigt här).
Som du kan se är den första rutnätet så bred som dess bredaste element (här bilden). På så sätt kan användarna alltid se bilden i full storlek. Men under en vis viewportstorlek är denna layout inte lyhörd.
min-halt
De min-halt nyckelord styr webbläsaren att rutnätskolan måste vara så bred som smalaste elementet som den innehåller, på ett sätt som leder inte till överflöde.
Låt oss se hur den tidigare demoen med bilden ser ut om vi ändrar värdet för den första kolumnen till min-halt:
.behållare galler-mall-kolumner: min-innehåll 1fr 1fr; / ** * Samma med minmax () notering: * galler-mall-kolumner: minmax (min-innehåll, min-innehåll) 1fr 1fr; * /
Jag lämnade den gröna bakgrunden under bilden så att du kan se den fulla storleken på den första rutan.
Som du kan se, behåller den första kolumnen den minsta bredden som kan uppnås utan överflöde. I det här exemplet definieras detta av den minsta bredden av den fjärde och den 7: e rutnätet, som härrör från stoppning och textstorlek egenskaper, som bilden i den första cellen kan krympas till noll utan ett överflöde.
Om nätcellen innehöll en textsträng, min-halt skulle vara lika med bredden på det längsta ordet, eftersom det är det minsta elementet som inte kan krympas ytterligare utan överflöde. Här är en bra artikel från BitsOfCode där du kan se hur min-halt och max-innehåll beter sig när rutnätet innehåller en textsträng.
Använder sig av min-halt och max-innehåll tillsammans
Om vi använda sig av min-halt och max-innehåll tillsammans inuti min Max() funktion vi får en rutnät som:
- är lyhörd
- har inget överflöde
- växer inte bredare än sitt bredaste element
.behållare galler-mall-kolumner: minmax (min-innehåll, max-innehåll) 1fr 1fr;
Vi kan också använda min-halt och max-innehåll nyckelord tillsammans med andra längdvärden inuti min Max() funktion, tills regeln är meningsfull. Till exempel, minmax (25%, maxhalt) eller minmax (min-innehåll, 300px) skulle vara båda giltiga reglerna.
bil
Slutligen kan vi också använda bil nyckelord som ett argument av min Max() fungera.
När bil är används som maximalt, dess värde är identiskt med max-innehåll.
När det är används som ett minimum, dess värde anges av min-bredd / min-höjd regel, vilket betyder att bil är ibland identisk med min-halt, men inte alltid.
I vårt tidigare exempel, min-halt motsvarar bil, som den minsta bredden på den första rutnätskolonnen är alltid mindre än sin minsta höjd. Så den tillhörande CSS-regeln:
.behållare galler-mall-kolumner: minmax (min-innehåll, max-innehåll) 1fr 1fr;
kan också skrivas så här:
.container galler-mall-kolumner: minmax (auto, auto) 1fr 1fr;
De bil sökord kan också vara används tillsammans med andra statiska och dynamiska enheter (pixlar, fr-enheter, procentandelar etc.) inuti min Max() funktion, till exempel minmax (auto, 300px) skulle vara en giltig regel.
Du kan testa hur min-halt, max-innehåll, och bil sökord arbetar med min Max() funktionen i följande Codepen demo:
