CSS-ruudukon opas: Asettelujen hallitseminen ruudukon ominaisuuksien avulla

Elementtien sijoittaminen verkkosivulle voi olla erittäin monimutkaista, kun työskentelet monimutkaisten asettelujen kanssa. Tässä CSS-ruudukko on hyödyllinen. Se on asettelujärjestelmä, joka on suunniteltu yksinkertaistamaan monimutkaisten asettelujen luomista.

Miten se auttaa sinua? Toisin kuin perinteiset asettelumenetelmät, joiden avulla voit sijoittaa elementtejä vain riveihin tai sarakkeisiin, CSS-ruudukko tarjoaa molempien maailmojen parhaat puolet – rivejä ja sarakkeita käyttävän 2D-lähestymistavan.

Ristikon säiliöt ja esineet

Voit käyttää CSS-ruudukon ominaisuuksia kahteen pääelementtityyppiin: ylä- ja alaelementteihin. Kun asetat näyttöominaisuuden arvoksi "grid" pääelementille, se muuntaa kyseisen elementin ruudukkosäilöksi. Mistä tahansa tämän ruudukon säilössä olevasta alielementistä tulee ruudukkokohde, joka perii käytetyt ruudukon ominaisuudet.

Näin se esitetään:

Ruudukkokohdasta voi tulla myös ruudukkosäiliö. Voit nyt viitata asetteluun sisäkkäisenä ruudukona – ruudukkona ruudukon sisällä. Pääritikon säiliöstä käytetään nyt nimitystä ulompi ristikko, kun taas esinekäännetystä ritiläkontista tulee sisäritilä.

Kukin näistä ruudukoista toimii toisistaan ​​riippumatta, mikä tarkoittaa, että sisäiselle ruudukolle asetetut ominaisuudet eivät vaikuta ulomman ruudukon asetteluun ja päinvastoin.

Tältä se näyttää:

Ristikkosäiliöiden ja esineiden välisen suhteen hallitseminen on välttämätöntä kaksiulotteisten asettelujen rakentaminen tehokkaasti.

Muista, että on olemassa ruudukkoominaisuuksia ruudukkosäiliöille, kun taas toiset ovat ruudukkokohteita.

Ruudukkolinjat ja raidat

Ennen kuin aloitat CSS-ruudukon käytön, sinun tulee tuntea kaksi keskeistä termiä:

1. Ruudukkoviivat: Ruudukkoviivat viittaavat vaaka- ja pystysuoraan viivoihin, jotka muodostavat ruudukon CSS-ruudukkoasettelussa. Ne määrittävät rivien ja sarakkeiden aloitus- ja lopetuspisteet, mikä auttaa järjestämään, missä ruudukossa asiat menevät. Nämä viivat ovat kuin laatikoiden reunat; niissä on numerot, joiden avulla voit viitata elementteihin paikannuksessa. Tässä punainen katkoviiva edustaa niitä:
2. Ristikkoradat: Ne ovat ruudukkoviivojen välisiä aukkoja, jotka määrittävät rivit ja sarakkeet. Ne ovat kuin ruudukkoasettelun rakennuspalikoita. Yllä olevassa kuvassa kunkin kohteen sisällä oleva värillinen alue edustaa ruudukkoraitaa.

Ajattele ruudukon viivoja ja raitoja ruudukkoasettelun rakennuspalikoina, kuten viivapaperin viivoja. Kun vaakasuora ruudukkoviiva leikkaa pystysuoran ruudukkoviivan, se muodostaa laatikon muotoisen solun. Nämä solut toimivat säiliöinä, joihin voit sijoittaa ruudukon kohteita.

CSS-ruudukon säilön ominaisuudet

Nämä ovat ominaisuuksia, joita voit käyttää ruudukkosäilössä asettelun järjestämiseksi ja elementtien sijoittamiseksi siihen. Kuten aiemmin mainittiin, yksi niistä on ruudukkoon asetettu näyttöominaisuus. Tässä lisää:

Ruudukkomalli

Tämä ominaisuus määrittää rivien ja sarakkeiden koon. Voit määrittää näiden ominaisuuksien koon käyttämällä pikseleitä, prosentteja tai murtolukuyksikköä (fr). Voit myös käyttää avainsanoja, kuten auto, minmax(), ja toistaa() lisäämään joustavuutta.

• ruudukko-malli-rivit: Asettaa rivien korkeuden.
• ruudukko-malli-sarakkeet: Määrittää sarakkeiden leveyden.

Tässä muutamia esimerkkejä:

Pikselien käyttäminen:

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

Prosenttien käyttö:

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

Käyttämällä fr:

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

Auto- ja minmax()-avainsanojen käyttäminen:

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

Repeat():n käyttö johdonmukaiseen kokoon:

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

Automaattiset sijoitus- ja ruudukkomallialueet

Automaattinen sijoitus: Automaattinen sijoittelu on kuin antaisi ruudukon päättää, mihin kohteet sijoitetaan. Jos et määritä tarkkoja paikkoja, ruudukko sijoittaa kohteet automaattisesti siihen järjestykseen, jossa ne näkyvät merkinnöissä. Tämä on hyödyllistä, kun sinulla on useita kohteita ja haluat niiden täyttävän ruudukon tasaisesti.

Ruudukkomallialueet: Ajattele ruudukkomallialueita asettelun luomisena nimettyjen vyöhykkeiden avulla. Se on kuin huoneiden nimeämistä pohjapiirroksen mukaan. Voit viitata näihin alueiden nimiin sijoittaessasi ruudukkokohteita. Esimerkiksi:

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

Tämä asettelu on kuin ruudukko, jossa on kolme saraketta ja neljä riviä. Pääsisältöalueelle on kaksi riviä. Merkittyjä alueita ovat "otsikko", "sivupalkki", "sisältö" ja "alatunniste". Seuraavissa osissa opit käyttämään näitä aluetunnisteita kunkin ruudukon ominaisuuksissa.

Tasaus CSS-ruudukossa

Tasausominaisuuksien avulla voit hallita ruudukon kohteiden sijaintia niiden ruudukon soluissa. Ominaisuudet ovat:

• perustella kohteita: Ohjaa kohteiden vaakasuoraa tasausta ruudukon solussa.
  • Arvot: alku, loppu, keskipiste ja venytys.
• kohdista kohteet: Ohjaa kohteiden pystysuuntaista tasausta ruudukon solussa.
  • Arvot: alku, loppu, keskipiste ja venytys.
• perustele-sisältö: Tasaa koko ruudukon säiliössä vaaka-akselia pitkin.
  • Arvot: alku, loppu, keskipiste, venytys, välilyönti, välilyönti ja tila-tasaisesti.
• kohdista-sisältö: Tasaa koko ruudukon säiliössä pystyakselia pitkin.
  • Arvot: alku, loppu, keskipiste, venytys, välilyönti, välilyönti ja tila-tasaisesti.

Tässä on esimerkki:

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

Tässä esimerkissä kohteet keskitetään soluihinsa sekä vaaka- että pystysuunnassa. Tila jaetaan tasaisesti koko ruudukon sarakkeiden välillä ja ruudukko keskitetään pystysuoraan astiaan.

Grid Gap

Ruudukkoväli tarkoittaa rivien ja sarakkeiden välistä tilaa ruudukkoasettelussa. Se auttaa luomaan visuaalisen erottelun ja lisää tilaa ruudukon kohteiden väliin.

The ruudukkoväli ominaisuuden avulla voit asettaa rivien ja sarakkeiden välisen raon. Voit määrittää sen useilla yksiköillä, kuten pikseleillä (px), prosentteilla (%), em-yksiköillä (em) ja paljon muuta.

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

Tässä esimerkissä ruudukkosäiliössä on kaksi saraketta, joiden välissä on 20 pikselin väli. Tämä väli erottaa sarakkeet visuaalisesti ja parantaa asettelua.

CSS-ruudukon kohteen ominaisuudet

Tässä on joitain tärkeitä ominaisuuksia, jotka ohjaavat yksittäisten ruudukkokohteiden käyttäytymistä CSS-ruudukkoasettelussa, sekä esimerkkejä:

ruudukko-rivin alku ja ruudukko-rivin loppu:

• Määrittää kohteen aloitus- ja loppurivit.
• Arvot voivat olla rivinumeroita, "span n" tai "auto".

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

Tämä koodi sijoittaa Ruudukkokohde 1 toisen rivin riviltä neljännen rivin riville.

grid-column-alku ja ruudukko-sarake-loppu:

• Määrittää kohteen aloitus- ja loppusarakerivit.
• Arvot voivat olla rivinumeroita, "span n" tai "auto".

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

Tämä koodi sijoittaa Ruudukkokohde 2 ensimmäiseltä sarakeriviltä kolmanteen sarakeriville.

ruudukko-alue:

• Määrittää ruudukon koon ja sijainnin ruudukossa viittaamalla nimettyihin ruudukon riveihin grid-template-alueet.
• Kuten aiemmin mainittiin, ennalta määritetyt aluenimet ovat jo käytössä grid-template-alueet omaisuutta. Tässä on esimerkki siitä, kuinka sitä käytetään yhdessä ruudukko-alue.

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

Tässä tulos:

perustella itseään:

• Tasaa yksittäiset kohteet vaakasuoraan solussaan.
• Arvot voivat olla alku, loppu, keskipiste ja venytys.

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

Tämä koodi keskittää vaakasuunnassa Ruudukkokohde 5 sen solussa.

kohdistaa itsensä:

• Tasaa yksittäiset kohteet pystysuunnassa solussaan.
• Arvot voivat olla alku, loppu, keskipiste ja venytys.

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

Tämä koodi linjaa Ruudukkokohde 1 solunsa pohjalle.

Voit vapaasti yhdistää ja mukauttaa näitä ominaisuuksia luodaksesi haluamasi asettelun ja ulkoasun jokaiselle CSS-ruudukon ruudukkokohdalle.

Responsiivisten asettelujen luominen CSS-ruudukoilla

CSS-ruudukoiden käyttäminen responsiivisten asettelujen luominen on tärkeää varmistaa, että verkkosivusi mukautuu saumattomasti eri näyttökokoihin ja laitteisiin. Voit käyttää näitä menetelmiä:

• Mediakyselyt: Voit käyttää mediakyselyitä käyttääksesi erilaisia ​​ruudukkoasetteluja näytön koosta riippuen. Saatat esimerkiksi joutua järjestämään ruudukon kohteita uudelleen tai säätämään sarakkeiden leveyttä pienempiä näyttöjä varten.
• Joustavat yksiköt: Käytä suhteellisia yksiköitä, kuten prosentteja ja fr, salliaksesi ruudukon kohteiden ja sarakkeiden mukautumisen suhteessa käytettävissä olevaan tilaan.
• minmax(): Käytä minmax() toiminto määrittää kokoalueen ruudukon sarakkeille tai riveille. Se varmistaa, että kohteet eivät näy liian pieniltä tai liian suurilta eri näytöillä.

Muista säätää sarakkeita ja muita elementtejä, kuten ruudukon kohteiden välisiä aukkoja, kirjasinkokoja ja marginaaleja. Se varmistaa johdonmukaisen ja hyvin suunnitellun asettelun, joka toimii hyvin eri laitteissa.

Tutustu CSS-ruudukkoasettelun mahdollisuuksiin

CSS-ruudukon joustavuuden ja tehon ansiosta voit luoda asetteluja, jotka eivät vain näytä hyvältä, vaan myös mukautuvat saumattomasti modernin web-suunnittelun vaatimuksiin. Sukella siis grid-maailmaan, tutustu mahdollisuuksiin ja kehitä verkkokehitystaitojasi.

Kun perehdyt asettelujärjestelmiin, saatat haluta verrata muita asettelumenetelmiä CSS-ruudukoihin. Voit tehdä sen CSS Flexbox -moduulilla. Tämä auttaa sinua oppimaan päättämään, kun työskentelet projektin parissa.