CSS Grid'i radade funktsioonid: dünaamiline paigutuse suuruse määramine reageeriva disaini jaoks

CSS Grid on veebipaigutuse revolutsiooniliselt muutnud, pakkudes enneolematut kontrolli ja paindlikkust. Selle võimsuse keskmes on radade funktsioonid, mis määravad ruudustikus ridade ja veergude suuruse. Nende funktsioonide mõistmine ja valdamine on ülioluline reageerivate ja dünaamiliste paigutuste loomiseks, mis kohanduvad sujuvalt erinevate ekraanisuuruste ja sisunõuetega.

Mis on CSS Grid'i radade funktsioonid?

Radade funktsioone kasutatakse ruudustiku radade (ridade ja veergude) suuruse määramiseks. Need pakuvad viisi, kuidas jaotada ruumi radade vahel, võimaldades nii fikseeritud kui ka paindlikku suuruse määramist. Kõige sagedamini kasutatavad radade funktsioonid on:

• fr (murdosaühik): Esindab murdosa olemasolevast ruumist ruudustiku konteineris.
• minmax(min, max): Määrab suuruse vahemiku minimaalse ja maksimaalse väärtuse vahel.
• auto: Raja suurus määratakse selle sees oleva sisu järgi.
• fit-content(pikkus): Raja suurus kohandub oma sisuga, kuid ei ületa kunagi määratud pikkust.

fr-ühik: olemasoleva ruumi jaotamine

fr-ühik on vaieldamatult kõige võimsam ja paindlikum radade funktsioonidest. See võimaldab teil jaotada olemasoleva ruumi ruudustiku konteineris proportsionaalselt ruudustiku radade vahel. fr-ühik esindab murdosa allesjäänud vabast ruumist pärast seda, kui teised rajad on suuruse saanud.

Põhikasutus

Vaatleme järgmist CSS-i:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

            

              
                Copy
              
            
          

See loob kolme veeruga ruudustiku. Esimene ja kolmas veerg võtavad kumbki 1/4 olemasolevast ruumist, samas kui teine veerg võtab 2/4 (ehk 1/2) olemasolevast ruumist. Kui ruudustiku konteiner on 600 pikslit lai ja fikseeritud suurusega veerge pole, on esimene ja kolmas veerg kumbki 150 pikslit laiad ja teine veerg on 300 pikslit lai.

fr-i kombineerimine fikseeritud suurusega radadega

fr-i tegelik võimsus tuleb esile, kui seda kombineerida fikseeritud suurusega radadega (nt pikslid, em-id, rem-id). Fikseeritud suurusega rajad saavad esmalt oma suuruse ja seejärel jaotatakse allesjäänud ruum fr-ühikute vahel.

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

            

              
                Copy
              
            
          

Selles näites on esimene veerg fikseeritud 200 pikslile. Kui ruudustiku konteiner on 600 pikslit lai, jaotatakse ülejäänud 400 pikslit teise ja kolmanda veeru vahel. Teine veerg saab 1/3 ülejäänud ruumist (umbes 133,33 pikslit) ja kolmas veerg saab 2/3 (umbes 266,67 pikslit).

Näide: globaalne navigeerimisriba

Kujutage ette globaalset navigeerimisriba, mille vasakul on fikseeritud laiusega logo, keskel otsinguriba, mis võtab suurema osa ruumist, ja paremal fikseeritud laiusega kasutajakonto ikoonide komplekt.

            .nav-container {
  display: grid;
  grid-template-columns: 150px 1fr 100px; /* Logo, Otsing, Konto ikoonid */
}

.nav-logo {
  /* Logo stiilid */
}

.nav-search {
  /* Otsinguriba stiilid */
}

.nav-account {
  /* Konto ikooni stiilid */
}

            

              
                Copy
              
            
          

Siin on logo veerg 150 pikslit lai, konto ikoonide veerg on 100 pikslit lai ja otsinguriba veerg laieneb, et täita ülejäänud ruum. See tagab, et otsinguriba kohandub erinevate ekraanisuurustega, säilitades samal ajal logo ja konto ikoonide fikseeritud suurused.

minmax() funktsioon: suuruse vahemike määratlemine

minmax() funktsioon võimaldab teil määratleda ruudustiku raja minimaalse ja maksimaalse suuruse. See on uskumatult kasulik reageerivate paigutuste loomiseks, mis kohanduvad erineva pikkusega sisuga, vältides samal ajal ülevoolu või liigset venitamist.

Põhikasutus

            .grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 300px) 1fr;
}

            

              
                Copy
              
            
          

Selles näites on esimene veerg vähemalt 100 pikslit lai ja maksimaalselt 300 pikslit lai. Kui esimese veeru sisu nõuab rohkem kui 100 pikslit, laieneb veerg, kuni see jõuab 300 pikslini. Pärast seda see enam ei kasva ja sisu võib üle voolata. Teine veerg võtab ülejäänud ruumi.

minmax()-i kombineerimine auto-ga

Levinud kasutusjuhtum on minmax()-i kombineerimine auto-ga, et võimaldada rajal kasvada vastavalt oma sisule, kuid ainult teatud piirini.

            .grid-container {
  display: grid;
  grid-template-columns: minmax(100px, auto) 1fr;
}

            

              
                Copy
              
            
          

Sellisel juhul on esimene veerg vähemalt 100 pikslit lai. Kui sisu on laiem kui 100 pikslit, laieneb veerg selle mahutamiseks. Kuid veerg laieneb ainult nii palju, kui on vaja sisu mahutamiseks. Kui sisu on vähem kui 100 pikslit, on veerg 100 pikslit lai. Teine veerg võtab jällegi ülejäänud ruumi.

Näide: tootekartide ruudustik

Kujutage ette tootekartide ruudustikku, kus soovite, et igal kaardil oleks minimaalne laius, kuid lubaksite neil laieneda, et täita olemasolev ruum kuni teatud maksimumini. See võib olla kasulik e-kaubanduse veebisaidil, kus on kasutajaid erinevatest riikidest ja toodete pealkirjadel võib olla erinev pikkus.

            .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.product-card {
  /* Tootekaardi stiilid */
}

            

              
                Copy
              
            
          

Siin loob repeat(auto-fit, minmax(200px, 1fr)) nii palju veerge kui võimalik, igaüks minimaalse laiusega 200 pikslit. 1fr maksimum lubab veergudel laieneda ja täita olemasoleva ruumi. grid-gap lisab kaartide vahele tühimiku. Ekraani suuruse muutudes kohandub veergude arv automaatselt, et sobituda olemasoleva ruumiga, tagades reageeriva paigutuse erineva tausta ja seadmetega kasutajatele.

Märksõna auto: sisupõhine suuruse määramine

Märksõna auto annab ruudustikule käsu määrata raja suurus selle sees oleva sisu põhjal. See on kasulik, kui soovite, et rada oleks täpselt nii suur, et see mahutaks oma sisu, ilma suurust selgesõnaliselt määramata.

Põhikasutus

            .grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

            

              
                Copy
              
            
          

Selles näites määratakse esimese veeru suurus selle sisu järgi. Teine veerg võtab ülejäänud ruumi.

Näide: külgriba paigutus

Vaatleme paigutust, mille vasakul on külgriba ja paremal põisisu ala. Külgriba peaks olema täpselt nii lai, et mahutada oma sisu (nt navigeerimislinkide loend), samas kui põisisu ala peaks võtma ülejäänud ruumi.

            .layout-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

.sidebar {
  /* Külgriba stiilid */
}

.main-content {
  /* Põhisisu stiilid */
}

            

              
                Copy
              
            
          

Märksõna auto tagab, et külgriba kohandub oma sisu laiusega. Kui sisu on lühike, on külgriba kitsas. Kui sisu on pikk, on külgriba laiem. See loob paindliku ja reageeriva külgriba paigutuse, mis sobib globaalsele publikule suunatud veebirakendustele, kus navigeerimismenüüdes võib olla erineva pikkusega keeli.

Funktsioon fit-content(): piiratud sisupõhine suuruse määramine

Funktsioon fit-content() on sarnane auto-le, kuid see võimaldab teil määrata raja maksimaalse suuruse. Raja suurus kohandatakse selle sisu järgi, kuid see ei ületa kunagi määratud pikkust.

Põhikasutus

            .grid-container {
  display: grid;
  grid-template-columns: fit-content(300px) 1fr;
}

            

              
                Copy
              
            
          

Selles näites määratakse esimese veeru suurus selle sisu järgi, kuid see ei ole kunagi laiem kui 300 pikslit. Kui sisu nõuab rohkem kui 300 pikslit, on veerg 300 pikslit lai ja sisu võib üle voolata või murduda sõltuvalt CSS-i omadustest `overflow` ja `word-wrap`.

Näide: nuppude grupp

Kujutage ette nuppude gruppi, mida soovite kuvada reas. Te soovite, et nupud oleksid suurusega, mis vastab nende sisule, kuid te ei soovi, et need muutuksid liiga laiaks ja võtaksid liiga palju ruumi.

            .button-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, fit-content(150px));
  grid-gap: 10px;
}

.button {
  /* Nupu stiilid */
}

            

              
                Copy
              
            
          

Siin määratakse iga nupu veeru suurus nupu teksti järgi, kuid see ei ole kunagi laiem kui 150 pikslit. Kui tekst on pikem kui 150 pikslit, murtakse tekst nupul. See loob nuppude grupi, mis kohandub erineva pikkusega nuputekstidega, säilitades samal ajal ühtlase visuaalse ilme.

Radade funktsioonide kombineerimine keerukate paigutuste jaoks

CSS Grid'i radade funktsioonide tegelik võimsus tuleneb nende kombineerimisest keerukate ja reageerivate paigutuste loomiseks. Siin on mõned näited:

Näide 1: kolme veeruga paigutus paindliku keskmise veeruga

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 150px;
}

            

              
                Copy
              
            
          

See loob kolme veeruga paigutuse, kus esimene veerg on 200 pikslit lai, teine veerg võtab ülejäänud ruumi ja kolmas veerg on 150 pikslit lai.

Näide 2: paigutus minimaalse külgriba laiusega

            .grid-container {
  display: grid;
  grid-template-columns: minmax(250px, auto) 1fr;
}

            

              
                Copy
              
            
          

See loob kahe veeruga paigutuse, kus esimesel veerul (külgribal) on minimaalne laius 250 pikslit ja see laieneb oma sisu mahutamiseks, samas kui teine veerg võtab ülejäänud ruumi.

Näide 3: võrdse kõrgusega veerud dünaamilise sisuga

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto); /* tagab, et kõik read on vähemalt 100px kõrged */
}

            

              
                Copy
              
            
          

See loob kolm võrdse laiusega veergu. Kasutades grid-auto-rows: minmax(100px, auto) tagatakse, et kõik read on vähemalt 100 pikslit kõrged ja kohandavad automaatselt oma kõrgust, et mahutada iga ruudustiku elemendi sisu, säilitades visuaalse järjepidevuse kogu ruudustikus.

Parimad praktikad CSS Grid'i radade funktsioonide kasutamiseks

• Kasutage fr-i paindlikuks suuruse määramiseks: fr-ühik on ideaalne olemasoleva ruumi proportsionaalseks jaotamiseks ruudustiku radade vahel.
• Kasutage minmax()-i suuruse vahemike jaoks: minmax() funktsioon võimaldab teil määrata raja minimaalse ja maksimaalse suuruse, tagades, et see kohandub erineva pikkusega sisuga ilma ülevoolu või liigse venitamiseta.
• Kasutage auto-t sisupõhiseks suuruse määramiseks: märksõna auto on kasulik, kui soovite, et rada oleks täpselt nii suur, et mahutada oma sisu.
• Kasutage fit-content()-i piiratud sisupõhiseks suuruse määramiseks: fit-content() funktsioon võimaldab teil määrata maksimaalse suuruse rajale, mille suurus on kohandatud selle sisu järgi.
• Kombineerige radade funktsioone keerukate paigutuste jaoks: CSS Grid'i radade funktsioonide tegelik võimsus tuleneb nende kombineerimisest keerukate ja reageerivate paigutuste loomiseks.
• Arvestage mõjuga ligipääsetavusele: Veenduge, et teie paigutused on ligipääsetavad puuetega kasutajatele. Kasutage semantilist HTML-i ja pakkuge alternatiivset sisu piltidele ja muudele mittetekstilistele elementidele.
• Testige erinevatel seadmetel ja brauserites: Testige oma paigutusi põhjalikult erinevatel seadmetel ja brauserites, et veenduda nende korrektses renderdamises ja reageerivuses.

Kokkuvõte

CSS Grid'i radade funktsioonid on hädavajalikud dünaamiliste ja reageerivate paigutuste loomiseks, mis kohanduvad erinevate ekraanisuuruste ja sisunõuetega. Valdades fr-ühikut, minmax() funktsiooni, auto märksõna ja fit-content() funktsiooni, saate luua paindlikke ja võimsaid paigutusi, mis pakuvad suurepärast kasutajakogemust kõigis seadmetes. Nende tehnikate omaksvõtmine annab teile võimaluse ehitada vastupidavamaid, kohandatavamaid ja globaalselt ligipääsetavamaid veebirakendusi.