Johdanto fr-yksikköön

Kun haluat rakentaa asetteluja, jotka mukautuvat sujuvasti eri näyttökokoihin, fr-yksikkö on tehokas työkalu käytettäväksi. CSS Gridin fr (fraction) -yksikkö mahdollistaa käytettävissä olevan tilan jakamisen ruudukon radoille. Toisin kuin kiinteät yksiköt, kuten px tai %, fr-yksikkö jakaa tilan dynaamisesti, varmistaen, että ruudukko pysyy joustavana ja responsiivisena.

Jos asetat ruudukon sarakkeet arvoihin 1fr 2fr, ensimmäinen sarake saa yhden osan käytettävissä olevasta tilasta ja toinen sarake kaksi osaa, riippumatta ruudukon kokonaisleveydestä. Tämä tekee fr-yksiköstä olennaisen, kun halutaan luoda asetteluja, jotka skaalautuvat tyylikkäästi ilman manuaalisia säätöjä.

Kuinka minmax() toimii ja milloin sitä käytetään

minmax()-funktiolla voit määrittää ruudukon radalle kokovälin asettamalla sekä minimi- että maksimiarvon. Tämä lähestymistapa on olennainen responsiivisessa suunnittelussa, koska se estää raitoja tulemasta liian pieniksi luettavuuden kannalta tai liian leveiksi tasapainoisen asettelun säilyttämiseksi.

• Käytä minmax(min, max) asettaaksesi ala- ja ylärajan sarakkeille tai riveille;
• Varmista sisällön luettavuus asettamalla järkevä minimikoko;
• Salli ratojen laajentua ja täyttää käytettävissä oleva tila yhdistämällä minmax() ja fr-yksiköt;
• Säilytä joustavat ja käyttäjäystävälliset asettelut kaikilla näyttöko'oilla.

Esimerkiksi minmax(150px, 1fr) varmistaa, että sarake ei koskaan kutistu alle 150px:n, mutta voi kasvaa niin suureksi kuin tila sallii. Käytä minmax()-funktiota, kun haluat kuvien, korttien tai sisältölohkojen pysyvän luettavina ja visuaalisesti tasapainoisina, hyödyntäen samalla dynaamista tilanjakoa.