CSS Grid radade suuruse jaotus: ruumi eraldamise algoritmi valdamine

            .grid-container {
  width: 800px;
  height: 600px;
  padding: 20px;
}
            

              
                Copy
              
            
          

            .grid-container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px auto 100px;
}

            

              
                Copy
              
            
          

Selles näites on esimene veerg alati 100px lai, teine veerg 200px lai, esimene rida 50px kõrge ja kolmas rida 100px kõrge. Need suurused arvatakse ülejäänud radade jaoks saadaolevast ruumist maha.

3. samm: 'auto' võtmesõnaga radade suuruse määramine

auto võtmesõnaga määratud rajad võivad käituda erinevalt sõltuvalt teistest võrgustiku radadest. Spetsifikatsioon määratleb mitu eraldi alamprogrammi auto võtmesõna lahendamiseks võrgustiku paigutuse ajal. Praegu vaatleme kõige lihtsamat juhtumit: kui saadaval on piisavalt ruumi, laieneb rada oma sisu mahutamiseks. Kui mitte, siis kahaneb see oma minimaalse sisu suuruseni.

Näide:

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

.grid-item {
  min-width: 50px;
}
            

              
                Copy
              
            
          

Selles näites, kui teise veeru sisu nõuab rohkem kui 50px laiust (.grid-item'i min-width tõttu), laieneb veerg selle mahutamiseks. Kui sisu on väiksem kui 50px, kasutatakse vaikimisi sisu suurust. Kui aga saadaolev ruum on piiratud, võib veerg kahaneda 50px-ni või isegi väiksemaks, et mahtuda konteinerisse.

4. samm: Sisemiste radade suuruste lahendamine

See samm hõlmab radade minimaalse ja maksimaalse sisu suuruse määramist. Minimaalne sisu suurus on väikseim suurus, mis rajal saab olla ilma sisu ületäitumiseta. Maksimaalne sisu suurus on suurus, mis on vajalik kogu raja sisu kuvamiseks ilma teksti murdmata või kärpimata. Neid suurusi kasutatakse paindliku baassuuruse arvutamiseks, kui kasutatakse fr ühikut või kui auto võtmesõna põrkub minimaalsete/maksimaalsete piirangutega. CSS Grid Layout spetsifikatsioon määratleb täpselt, kuidas sisemisi suurusi arvutada, mis sõltub võrgustiku elementidele seatud omadustest ja sisust endast.

See samm muutub väga oluliseks, kui kasutate radade suuruse otseseks määramiseks võtmesõnu nagu min-content või max-content. Need võtmesõnad annavad võrgustikule korralduse määrata raja suurus selle sisemiste sisu suuruste alusel.

5. samm: Paindlike radade suuruse määramine (fr-ühik)

fr ühikuga määratud rajad tähistavad osa võrgustiku konteineris allesjäänud saadaolevast ruumist pärast fikseeritud suurusega, protsentuaalse suurusega ja automaatselt suurustatud radade arvessevõtmist. Algoritm arvutab kõigi fr ühikute kogusumma ja jagab seejärel järelejäänud ruumi proportsionaalselt radade vahel nende fr väärtuste alusel.

Näide:

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

            

              
                Copy
              
            
          

Selles näites on võrgustiku konteineril kolm veergu. Esimene veerg võtab 1 osa saadaolevast ruumist, teine veerg 2 osa ja kolmas veerg 1 osa. Seetõttu on teine veerg kaks korda laiem kui esimene ja kolmas veerg.

Kui pärast fr ühiku alusel ruumi jaotamist mõned rajad ikka veel oma sisu ületavad, vaatab algoritm paindlikud rajad uuesti üle ja vähendab nende suurusi proportsionaalselt, kuni sisu mahub ära või saavutatakse raja minimaalne suurus.

6. samm: minmax() rakendamine

minmax() funktsioon võimaldab teil määrata võrgustiku rajale minimaalse ja maksimaalse suuruse. See võib olla eriti kasulik, kui soovite tagada, et rada ei muutuks kunagi liiga väikeseks ega liiga suureks, olenemata selle sisust või saadaolevast ruumist.

Näide:

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

            

              
                Copy
              
            
          

Selles näites on teine veerg vähemalt 200px lai. Kui järelejäänud ruumi on piisavalt, laieneb see saadaoleva ruumi täitmiseks, kasutades 1fr ühikut. Kuid see ei ole kunagi väiksem kui 200px.

Algoritm käsitleb esmalt minmax() minimaalset väärtust raja suurusena ja eraldab ruumi vastavalt. Hiljem, kui on lisaruumi, võib see laieneda maksimaalse väärtuseni. Kui ruumi ei ole piisavalt, on eelistatud minimaalne väärtus.

7. samm: Sisupõhiste suuruse määramise võtmesõnade käsitlemine

CSS Grid pakub sisupõhiseid suuruse määramise võtmesõnu nagu min-content, max-content ja fit-content(), et radade suurust dünaamiliselt sisu põhjal määrata. Need on reageeriva disaini jaoks äärmiselt väärtuslikud.

• min-content: Rada on nii kitsas kui võimalik, ilma et sisu üle voolaks.
• max-content: Rada on nii lai, kui on vaja kogu sisu kuvamiseks ilma teksti murdmata.
• fit-content(suurus): Rada käitub nagu auto, kuni see saavutab määratud suuruse, misjärel see enam ei kasva.

Näide:

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

            

              
                Copy
              
            
          

Esimene veerg on ainult nii lai, kui selle kitsaim sisu. Teine veerg laieneb, et kuvada kogu sisu ilma teksti murdmata. Kolmas veerg kasvab sisu suurenedes, kuid peatub 300px juures.

8. samm: Ülevoolude käsitlemine

Kui isegi pärast ülaltoodud sammude abil ruumi jaotamist sisu ikka veel oma võrgustiku lahtrist üle voolab, saab overflow omadust kasutada ülevoolu käsitlemise kontrollimiseks. Levinumad overflow omaduse väärtused on:

• visible: Ülevoolav sisu on nähtav väljaspool võrgustiku lahtrit (vaikimisi).
• hidden: Ülevoolav sisu lõigatakse ära.
• scroll: Võrgustiku lahtrile lisatakse kerimisribad, et kasutajad saaksid ülevoolavat sisu kerida.
• auto: Kerimisribad lisatakse ainult siis, kui sisu voolab üle.

Praktilised näited ja kasutusjuhud

Uurime mõningaid praktilisi näiteid, kuidas kasutada CSS Grid'i radade suuruse jaotamise algoritmi levinud paigutuste loomiseks:

Näide 1: Võrdse kõrgusega veerud

Võrdse kõrgusega veergude saavutamine on levinud paigutusnõue. CSS Grid'iga on see hõlpsasti saavutatav, kasutades 1fr ühikut.

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 300px; /* Tähtis: Vajalik on selgesõnaline kõrgus */
}

.grid-item {
  background-color: #eee;
  padding: 20px;
  border: 1px solid #ccc;
}

            

              
                Copy
              
            
          

Selles näites on kõik kolm veergu võrdse laiusega ja kuna võrgustiku konteineril on määratud kõrgus, venivad kõik võrgustiku elemendid automaatselt, et täita saadaolev kõrgus, tulemuseks on võrdse kõrgusega veerud. Pange tähele, kui oluline on võrgustiku konteinerile selgesõnalise kõrguse määramine.

Näide 2: Külgriba paigutus

Fikseeritud laiusega külgriba ja paindliku põhisisu alaga külgriba paigutuse loomine on veel üks levinud kasutusjuht.

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

.sidebar {
  background-color: #f0f0f0;
  padding: 20px;
}

.main-content {
  padding: 20px;
}

            

              
                Copy
              
            
          

Selles näites on külgriba alati 200px lai ja põhisisu ala laieneb, et täita ülejäänud saadaolev ruum.

Näide 3: Reageeriv pildigalerii

CSS Grid sobib hästi reageerivate pildigaleriide loomiseks, mis kohanduvad erinevate ekraanisuurustega.

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

.grid-item {
  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

            

              
                Copy
              
            
          

Selles näites loob repeat(auto-fit, minmax(200px, 1fr)) süntaks nii palju veerge kui võimalik, igaühe minimaalne laius on 200px ja maksimaalne laius 1fr. See tagab, et pildid täidavad alati saadaoleva ruumi ja murduvad vajadusel järgmisele reale. grid-gap omadus lisab piltide vahele vahe.

Näide 4: Keeruline paigutus minmax() ja fr-ga

            .grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr minmax(100px, 15%);
  grid-template-rows: auto 1fr auto;
  height: 500px;
}

.header { grid-area: 1 / 1 / 2 / 4; background-color: #eee; }
.sidebar { grid-area: 2 / 1 / 3 / 2; background-color: #ddd; }
.content { grid-area: 2 / 2 / 3 / 3; background-color: #ccc; }
.ads { grid-area: 2 / 3 / 3 / 4; background-color: #bbb; }
.footer { grid-area: 3 / 1 / 4 / 4; background-color: #aaa; }

.grid-item { padding: 10px; border: 1px solid black; }

            

              
                Copy
              
            
          

See näide kasutab minmax()-i, et määrata külgriba ja reklaamide jaotiste jaoks paindlikud laiused, tagades, et need ei muutuks kunagi liiga kitsaks. 1fr ühikut kasutatakse põhisisu ala jaoks, võimaldades sellel täita ülejäänud ruumi. See kombinatsioon pakub paindlikku ja reageerivat paigutust.

CSS Grid radade suuruse määramise parimad tavad

Siin on mõned parimad tavad, mida meeles pidada CSS Grid'i radade suuruse määramisega töötamisel:

• Kasutage paindlike paigutuste jaoks fr ühikuid: fr ühik on ideaalne paigutuste loomiseks, mis kohanduvad erinevate ekraanisuurustega.
• Kasutage minmax(), et määrata minimaalsed ja maksimaalsed raja suurused: See tagab, et rajad ei muutuks kunagi liiga väikeseks ega liiga suureks, olenemata nende sisust.
• Kaaluge sisupõhiseid suuruse määramise võtmesõnu: Need võivad olla väga abiks reageerivate paigutuste puhul, mis kohanduvad erineva pikkusega sisuga.
• Testige oma paigutusi erinevatel seadmetel ja ekraanisuurustel: See on ülioluline tagamaks, et teie paigutused on tõeliselt reageerivad ja visuaalselt meeldivad. Kasutage brauseri arendajatööriistu erinevate ekraanisuuruste ja seadme orientatsioonide simuleerimiseks.
• Alustage mobiil-eelkõige lähenemisega: Kujundage oma paigutused esmalt väiksematele ekraanidele ja seejärel täiustage neid järk-järgult suuremate ekraanide jaoks. See tagab, et teie paigutused on kättesaadavad kasutajatele kõikides seadmetes.
• Kasutage kirjeldavaid klassinimesid: Kasutage klassinimesid, mis näitavad selgelt iga võrgustiku elemendi eesmärki. See muudab teie CSS-koodi lihtsamini mõistetavaks ja hooldatavaks.
• Kommenteerige oma CSS-koodi: Lisage oma CSS-koodile kommentaare, et selgitada erinevate jaotiste ja omaduste eesmärki. See muudab teie ja teiste jaoks koodi mõistmise ja hooldamise lihtsamaks.

Levinud võrgustiku paigutuse probleemide lahendamine

Isegi hea arusaamaga CSS Grid'i radade suuruse jaotamise algoritmist võite siiski kohata mõningaid levinud paigutusprobleeme. Siin on mõned näpunäited nende probleemide lahendamiseks:

• Rajad ei ole ootuspärase suurusega: Kontrollige oma radade suuruse väärtusi, et veenduda nende õigsuses. Samuti veenduge, et te ei kirjuta oma radade suuruse väärtusi tahtmatult üle teiste CSS-omadustega.
• Sisu voolab oma võrgustiku lahtrist üle: Kasutage overflow omadust, et kontrollida, kuidas ülevoolu käsitletakse. Saate ka oma radade suuruse väärtusi kohandada, et tagada sisu jaoks piisavalt ruumi.
• Võrgustiku elemendid ei joondu õigesti: Kasutage justify-items, align-items, justify-content ja align-content omadusi, et kontrollida võrgustiku elementide joondamist nende võrgustiku lahtrites ja võrgustiku konteineris.
• Võrgustiku vahed ei ilmu ootuspäraselt: Veenduge, et grid-gap omadus on võrgustiku konteinerile õigesti rakendatud. Samuti veenduge, et pole muid CSS-omadusi, mis segaksid võrgustiku vahesid.

Edasijõudnute tehnikad

Kui olete CSS Grid'i radade suuruse määramise põhitõed selgeks saanud, võite uurida mõningaid edasijõudnute tehnikaid veelgi keerukamate paigutuste loomiseks.

Pesastatud võrgustikud (Nested Grids)

CSS Grid võimaldab teil võrgustikke teiste võrgustike sisse pesastada. See võib olla kasulik hierarhiliste struktuuridega keerukate paigutuste loomiseks.

Nimega võrgustiku alad (Named Grid Areas)

Nimega võrgustiku alad võimaldavad teil oma võrgustikus määratleda konkreetsed alad ja määrata võrgustiku elemendid nendesse aladesse, kasutades grid-area omadust. See võib muuta teie CSS-koodi loetavamaks ja hooldatavamaks.

Automaatne voog (Autoflow)

grid-auto-flow omadus kontrollib, kuidas võrgustiku elemendid automaatselt võrgustikku paigutatakse, kui neid ei ole selgesõnaliselt paigutatud, kasutades grid-column ja grid-row omadusi. See võib olla kasulik dünaamiliste paigutuste loomiseks, kus võrgustiku elementide arv ei ole ette teada.

Kokkuvõte

CSS Grid'i radade suuruse jaotamise algoritmi mõistmine on oluline reageerivate, paindlike ja visuaalselt meeldivate veebipaigutuste loomiseks. Valdades erinevaid suuruse määramise omadusi, sealhulgas fikseeritud suurusi, protsentuaalseid suurusi, fr ühikuid, auto ja minmax(), saate oma võrgustiku paigutuste üle täieliku kontrolli ja luua tõeliselt unikaalseid ja kaasahaaravaid kasutajakogemusi. Võtke omaks CSS Grid'i paindlikkus ja võimsus ning avage uus kontrollitase oma veebidisainide üle.

Jätkake katsetamist erinevate suuruse määramise omaduste ja tehnikate kombinatsioonidega, et leida parim lähenemine oma konkreetsetele paigutusvajadustele. Kogemuste kasvades areneb teil sügavam arusaam algoritmist ja te muutute osavamaks keerukate ja reageerivate võrgustiku paigutuste loomisel.