CSS-ruudustiku juhend: ruudustiku omadustega paigutuste valdamine

Elementide paigutamine veebilehel võib keerukate paigutustega töötamisel olla väga keeruline. Siin tuleb appi CSS-võrk. See on paigutussüsteem, mis on loodud keerukate paigutuste loomise protsessi lihtsustamiseks.

Kuidas see teid aitab? Erinevalt traditsioonilistest paigutusmeetoditest, mis võimaldavad teil paigutada elemente ainult ridadesse või veergudesse, pakub CSS-võrk teile mõlemast maailmast parimat – ridade ja veergude abil 2D-lähenemist.

Grid konteinerid ja esemed

CSS-i ruudustiku atribuute saate rakendada kahte peamist tüüpi elementidele: vanem ja lapsed. Kui määrate ülemelemendi kuvaatribuudiks "grid", teisendab see selle elemendi ruudustiku konteineriks. Mis tahes alamelement selles ruudustiku konteineris muutub ruudustikuüksuseks, mis pärib rakendatud ruudustiku omadused.

See on kujutatud järgmiselt:

Võreelemendist võib saada ka ruudustiku konteiner. Nüüd saate paigutust nimetada pesastatud ruudustikuks – ruudustikuks ruudustikus. Põhivõrekonteinerit nimetatakse nüüd välimiseks ruudustikuks, samas kui esemeks pööratud ruudustiku konteinerist saab sisemine võrk.

Kõik need ruudud töötavad üksteisest sõltumatult, mis tähendab, et sisemise ruudustiku jaoks määratud omadused ei mõjuta välimise ruudustiku paigutust ja vastupidi.

See näeb välja järgmine:

Võrgukonteinerite ja esemete vahelise suhte valdamine on oluline kahemõõtmeliste paigutuste ehitamine tõhusalt.

Pidage meeles, et võrgukonteinerite jaoks on olemas ruudustiku omadused, teised aga ruudustiku üksuste jaoks.

Võrgujooned ja rajad

Enne CSS-i ruudustiku kasutamise alustamist peaksite teadma kahte peamist terminit.

1. Võrgujooned: ruudustiku jooned viitavad horisontaalsetele ja vertikaalsetele joontele, mis moodustavad ruudustiku CSS-i ruudustiku paigutuses. Need määravad ridade ja veergude algus- ja lõpp-punktid, aidates korraldada asjade asukohta ruudustikus. Need jooned on nagu kastide servad; neil on numbrid, mis aitavad positsioneerimisel elementidele viidata. Siin tähistab neid punane katkendjoon:
2. Võrgurajad: need on tühikud ruudustiku joonte vahel, mis määratlevad ridu ja veerge. Need on nagu ruudustiku paigutuse ehitusplokid. Ülaltoodud pildil tähistab iga üksuse värviline ala ruudustiku rada.

Mõelge ruudustiku joontele ja radadele kui ruudustiku paigutuse ehitusplokkidele, nagu jooned millimeetripaberi lehel. Kui horisontaalne ruudustik lõikub vertikaalse ruudustiku joonega, moodustab see kastikujulise lahtri. Need lahtrid toimivad konteineritena, kuhu saate oma ruudustiku üksused paigutada.

CSS-ruudustiku konteineri omadused

Need on atribuudid, mida saate ruudustiku konteinerile rakendada, et korraldada paigutust ja aidata selles elemente positsioneerida. Nagu varem mainitud, on üks neist kuva atribuut, mis on seatud ruudustikule. Siin on veel:

Võrgu mall

See atribuut määrab ridade ja veergude suuruse. Nende omaduste suurust saate muuta pikslite, protsentide või murdosa (fr) abil. Samuti võite kasutada märksõnu nagu auto, minmax()ja kordama () paindlikkuse suurendamiseks.

• ruudustik-mall-read: Määrab ridade kõrgused.
• ruudustik-mall-veerud: määrab veergude laiuse.

siin on mõned näidised:

Pikslite kasutamine:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Protsentide kasutamine:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Kasutades fr:

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

Auto ja minmax() märksõnade kasutamine:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Kordus() kasutamine järjepideva suuruse määramiseks:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Automaatse paigutuse ja ruudustiku mallide alad

Automaatne paigutus: Automaatne paigutus on nagu lasta ruudustikul otsustada, kuhu üksused paigutada. Kui te täpseid positsioone ei määra, paigutab ruudustik üksused automaatselt nende märgistusel kuvamise järjekorras. See on kasulik, kui teil on palju üksusi ja soovite, et need täidaksid ruudustiku ühtlaselt.

Ruudustiku mallide alad: Mõelge ruudustikumalli aladele kui paigutuse loomisele nimetsoonide abil. See on nagu ruumide nimetamine korruseplaanil. Nendele alade nimedele saate viidata ruudustiku üksuste positsioneerimisel. Näiteks:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

See paigutus on nagu kolme veeru ja nelja reaga ruudustik. Põhisisuala jaoks on kaks rida. Sildistatud alade hulka kuuluvad "päis", "küljeriba", "sisu" ja "jalus". Järgmistes jaotistes saate teada, kuidas neid alasilte kasutada iga ruudustiku üksuse atribuutides.

Joondamine CSS-võrgus

Joondusatribuutide abil saate juhtida ruudustiku üksuste paigutust nende ruudustiku lahtrites. Omadused on:

• õigustama-esemed: juhib üksuste horisontaalset joondamist nende ruudustiku lahtris.
  • Väärtused: algus, lõpp, keskpunkt ja venitus.
• joondada-üksused: juhib üksuste vertikaalset joondamist nende ruudustiku lahtris.
  • Väärtused: algus, lõpp, keskpunkt ja venitus.
• õigustama-sisu: joondab kogu konteineri ruudustiku piki horisontaaltelge.
  • Väärtused: algus, lõpp, keskpunkt, venitus, tühik-vahel, tühik-ümbrus ja tühik-ühtlane.
• joondada-sisu: joondab kogu konteineri ruudustiku piki vertikaaltelge.
  • Väärtused: algus, lõpp, keskpunkt, venitus, tühik-vahel, tühik-ümbrus ja tühik-ühtlane.

Siin on näide:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

Selles näites tsentreeritakse üksused oma lahtrites nii horisontaalselt kui ka vertikaalselt. Ruum jaotatakse kogu ruudustiku veergude vahel ühtlaselt ja ruudustik paikneb konteineris vertikaalselt.

Võrgu vahe

Ruudustiku vahe viitab ruudustikupaigutuse ridade ja veergude vahelisele ruumile. See aitab luua visuaalset eraldatust ja lisab ruudustiku elementide vahele ruumi.

The grid-gap atribuut võimaldab teil määrata ridade ja veergude vahe. Selle määratlemiseks saate kasutada erinevaid ühikuid, nagu pikslid (px), protsendid (%), em-ühikud (em) ja palju muud.

.grid-container {
grid-gap: 20px;
}

Selles näites on ruudustiku konteineris kaks veergu, mille vahel on 20-piksline vahe. See vahemaa eraldab veerud visuaalselt ja täiustab paigutust.

CSS-ruudustiku üksuse omadused

Siin on mõned peamised atribuudid, mis juhivad üksikute ruudustikuüksuste käitumist CSS-i ruudustiku paigutuses, koos näidetega.

grid-rea algus ja ruudustik-rea lõpp:

• Määrab üksuse algus- ja lõpurea.
• Väärtused võivad olla reanumbrid, "span n" või "auto".

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

See kood asetab Ruudustiku üksus 1 teise rea realt neljanda rea ​​reale.

ruudustiku veeru algus ja ruudustiku veeru lõpp:

• Määrab üksuse algus- ja lõpuveeru read.
• Väärtused võivad olla reanumbrid, "span n" või "auto".

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

See kood asetab Ruudustiku üksus 2 esimesest veerurealt kolmanda veeru reale.

ruudustik-ala:

• Määrab ruudustiku elemendi suuruse ja asukoha ruudustikus, viidates nimetatud ruudustiku ridadele ruudustik-malli-alad.
• Nagu varem mainitud, on eelmääratletud piirkondade nimed juba kasutusel ruudustik-malli-alad vara. Siin on näide selle kohta, kuidas seda koos kasutada ruudustik-ala.

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Siin on tulemus:

end õigustama:

• Joondab üksikud üksused oma lahtris horisontaalselt.
• Väärtused võivad olla algus, lõpp, keskpunkt ja venitus.

.grid-item-5 {
justify-self: center;
}

See kood tsentreerib horisontaalselt Ruudustiku üksus 5 oma raku sees.

joondus-ise:

• Joondage üksikud üksused selle lahtris vertikaalselt.
• Väärtused võivad olla algus, lõpp, keskpunkt ja venitus.

.grid-item-1 {
align-self: end;
}

See kood joondub Ruudustiku üksus 1 selle lahtri põhja.

Võite neid atribuute kombineerida ja kohandada, et luua oma CSS-ruudustiku igale ruudustikuüksusele soovitud paigutus ja välimus.

Reageerivate paigutuste loomine CSS-võrkude abil

CSS-i ruudustiku kasutamine tundlike paigutuste loomine on oluline tagada, et teie veebileht kohandub sujuvalt erinevate ekraanisuuruste ja seadmetega. Saate rakendada neid meetodeid:

• Meediapäringud: Saate kasutada meediumipäringuid erinevate ruudustiku paigutuste rakendamiseks olenevalt ekraani suurusest. Näiteks peate võib-olla väiksemate ekraanide jaoks ruudustiku üksusi ümber korraldama või veergude laiust kohandama.
• Paindlikud ühikud: kasutage suhtelisi ühikuid (nt protsenti ja fr), et võimaldada ruudustiku üksuste ja veergude kohandamist proportsionaalselt olemasoleva ruumiga.
• minmax(): Kasuta minmax() funktsioon, et määrata ruudustiku veergude või ridade suurusvahemik. See tagab, et üksused ei paista erinevatel ekraanidel liiga väikesed ega liiga suured.

Ärge unustage kohandada veerge ja muid elemente, nagu ruudustiku üksuste vahed, fondi suurused ja veerised. See tagab järjepideva ja hästi läbimõeldud paigutuse, mis töötab hästi erinevates seadmetes.

Uurige CSS-i ruudustiku paigutuse võimalusi

CSS-võrgu paindlikkuse ja võimsuse omaksvõtmine võimaldab teil koostada paigutusi, mis mitte ainult ei näe suurepärased välja, vaid sobivad ka sujuvalt kaasaegse veebidisaini nõudmistega. Niisiis, sukelduge võrkude maailma, uurige võimalusi ja täiustage oma veebiarendusoskusi.

Paigutussüsteemidesse süvenedes võiksite võrrelda teisi paigutusmeetodeid CSS-võrkudega. Seda saate teha CSS Flexboxi mooduliga. See aitab teil projektiga töötades õppida otsustama.