Introduktion till fr-enheten

När du vill skapa layouter som anpassar sig smidigt till alla skärmstorlekar är fr-enheten ett kraftfullt verktyg. fr (fraktion) i CSS Grid gör det möjligt att tilldela en andel av det tillgängliga utrymmet till grid-spår. Till skillnad från fasta enheter som px eller %, fördelar fr-enheten utrymmet dynamiskt och säkerställer att ditt rutnät förblir flexibelt och responsivt.

Om du sätter dina grid-kolumner till 1fr 2fr får den första kolumnen en del av det tillgängliga utrymmet och den andra kolumnen får två delar, oavsett rutnätets totala bredd. Detta gör fr-enheten avgörande för att skapa layouter som skalar elegant utan manuella justeringar.

Hur minmax() fungerar och när det används

Funktionen minmax() låter dig definiera ett storleksintervall för ett grid-spår genom att ange både ett minimi- och ett maximivärde. Detta tillvägagångssätt är avgörande för responsiv design eftersom det förhindrar att grid-spår blir för små för att läsa eller för breda för att behålla en balanserad layout.

• Använd minmax(min, max) för att sätta en nedre och övre storleksgräns för kolumner eller rader;
• Säkerställ att innehållet förblir läsbart genom att ange ett rimligt minsta värde;
• Tillåt spår att expandera och fylla tillgängligt utrymme genom att kombinera minmax() med fr-enheter;
• Behåll flexibla, användarvänliga layouter över alla skärmstorlekar.

Till exempel säkerställer minmax(150px, 1fr) att en kolumn aldrig krymper under 150px men kan växa så mycket som det tillgängliga utrymmet tillåter. Använd minmax() när du vill att bilder, kort eller innehållsblock ska förbli läsbara och visuellt balanserade, samtidigt som du drar nytta av dynamisk utrymmesfördelning.