Gridin väli, perustelu ja tasaus
Lisätkää grid-solujen välistä tilaa gap-x-*- ja gap-y-*-luokilla ja tasatkaa kohteet grid-alueiden sisällä justify-items-*- ja place-items-*-luokilla.
Gridin väli, perustelu ja tasaus on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Ruudukon solujen välinen tila
Kun ruudukon sarakkeet ja rivit on määritetty, seuraava vaihe on solujen välisen tilan hallinta. Tailwindin gap-*-apuohjelmat vastaavat suoraan CSS:n gap-lyhennettä, joka määrittää sekä rivi- että sarakevälit samanaikaisesti. Yksi gap-4-luokka (16 pikseliä) antaa yhtenäisen välistyksen kaikkiin suuntiin ja pitää asettelun tasapainoisena ilman mukautettua CSS:ää.
<!-- Uniform gap in all directions -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-100 p-4 rounded">A</div>
<div class="bg-blue-100 p-4 rounded">B</div>
<div class="bg-blue-100 p-4 rounded">C</div>
<div class="bg-blue-100 p-4 rounded">D</div>
<div class="bg-blue-100 p-4 rounded">E</div>
<div class="bg-blue-100 p-4 rounded">F</div>
</div>gap-x-*- ja gap-y-*-apuohjelmat
Kun tarvitset eri välistykset sarakkeiden ja rivien väliin, käytä gap-x-*-luokkaa vaakasuuntaisiin väleihin ja gap-y-*-luokkaa pystysuuntaisiin väleihin. Esimerkiksi gap-x-8 gap-y-4 antaa sarakkeiden väliin leveän vaakasuuntaisen tilan ja rivien väliin tiiviimmän pystysuuntaisen tilan. Näin voit hienosäätää ruudukon visuaalista rytmiä itsenäisesti kumpaankin suuntaan.
<!-- Wide horizontal gap, tight vertical gap -->
<div class="grid grid-cols-3 gap-x-10 gap-y-2">
<div class="bg-green-100 p-3 rounded">A</div>
<div class="bg-green-100 p-3 rounded">B</div>
<div class="bg-green-100 p-3 rounded">C</div>
<div class="bg-green-100 p-3 rounded">D</div>
<div class="bg-green-100 p-3 rounded">E</div>
<div class="bg-green-100 p-3 rounded">F</div>
</div>Kohteiden tasaus vaakasuunnassa
justify-items-* määrittää, miten kohteet tasataan vaakasuunnassa ruudukkosolunsa sisällä. Neljä arvoa ovat justify-items-start, justify-items-center, justify-items-end ja justify-items-stretch (oletus). Kun kohteet venytetään, ne täyttävät solunsa koko leveyden. Keskitys on yleistä kuvakeruudukoissa, joissa jokainen kuvake halutaan keskittää sarakkeeseensa.
<!-- Icons centered within each grid cell -->
<div class="grid grid-cols-4 gap-6 justify-items-center">
<div class="text-4xl">📷</div>
<div class="text-4xl">🎵</div>
<div class="text-4xl">📚</div>
<div class="text-4xl">🎮</div>
</div>Kohteiden tasaus pystysuunnassa
Ruudukkoyhteydessä align-items-* määrittää, miten kohteet tasataan pystysuunnassa riviraidan sisällä. items-start kiinnittää kohteet rivin yläreunaan, items-center keskittää ne pystysuunnassa ja items-end siirtää ne alareunaan. Oletus on items-stretch, joka saa kohteet täyttämään rivin korkeuden. Tämä eroaa Flexboxin align-items-ominaisuudesta, vaikka Tailwind käyttää samoja luokanimiä.
<!-- Grid row with mixed-height cells, items aligned to center -->
<div class="grid grid-cols-3 gap-4 items-center h-32">
<div class="bg-purple-200 p-2 rounded h-8">Short</div>
<div class="bg-purple-200 p-6 rounded">Tall</div>
<div class="bg-purple-200 p-2 rounded h-12">Medium</div>
</div>place-items molemmille akseleille kerralla
place-items-*-apuohjelma on lyhenne, joka määrittää sekä align-items- että justify-items-ominaisuuden samanaikaisesti. place-items-center keskittää jokaisen ruudukkokohteen tarkasti sekä vaaka- että pystysuunnassa solunsa sisällä. Aiemmin tähän tarvittiin kaksi erillistä CSS-ominaisuutta. Tämä sopii erinomaisesti kuvake- ja avatar-ruudukoihin sekä kaikkiin ruudukoihin, joissa kohteet halutaan solujensa keskelle.
<!-- Avatar cards, each item perfectly centered in its cell -->
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="w-16 h-16 bg-red-400 rounded-full flex items-center justify-center text-white font-bold">JD</div>
<div class="w-16 h-16 bg-blue-400 rounded-full flex items-center justify-center text-white font-bold">AB</div>
<div class="w-16 h-16 bg-green-400 rounded-full flex items-center justify-center text-white font-bold">CK</div>
<div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center text-white font-bold">MR</div>
</div>Koko ruudukon tasaus
Kun ruudukon sarakkeiden kokonaisleveys on pienempi kuin säilön leveys, justify-content-* sijoittaa koko ruudukkolohkon vaakasuunnassa säilön sisälle. justify-center keskittää sarakeryhmän, justify-between levittää sarakkeet reunoille ja justify-around lisää tasaisen tilan jokaisen sarakkeen ympärille. Tämä eroaa justify-items-ominaisuudesta, joka tasaa kohteet solujen sisällä.
<!-- Fixed-width columns centered within a wide container -->
<div class="grid gap-4 justify-center" style="grid-template-columns: repeat(3, 100px)">
<div class="bg-orange-100 p-4 rounded">A</div>
<div class="bg-orange-100 p-4 rounded">B</div>
<div class="bg-orange-100 p-4 rounded">C</div>
</div>Sisällön tasaus ja ruudukon pystysuuntainen sijoittelu
align-content-* määrittää, miten koko ruudukon rivijoukko sijoitetaan pystysuunnassa, kun rivien kokonaiskorkeus on säilön korkeutta pienempi. content-center keskittää kaikki rivit pystysuunnassa, content-between levittää ne ylä- ja alareunaan ja content-evenly jakaa niiden ympärille yhtä suuret välit. Tämä on erityisen hyödyllistä kiinteäkorkuisissa säilöissä, kuten koontinäytön pienoisnäkymässä.
<!-- 2 rows centered in a tall container -->
<div class="grid grid-cols-2 gap-4 h-64 content-center">
<div class="bg-teal-100 p-4 rounded">Row 1, A</div>
<div class="bg-teal-100 p-4 rounded">Row 1, B</div>
<div class="bg-teal-100 p-4 rounded">Row 2, A</div>
<div class="bg-teal-100 p-4 rounded">Row 2, B</div>
</div>place-content – ruudukkotason lyhenne
place-content-* on lyhenne, joka yhdistää align-content- ja justify-content-ominaisuudet yhdeksi apuohjelmaksi. place-content-center keskittää koko ruudukon säilössään sekä vaaka- että pystysuunnassa. Tämä on hyödyllistä koko näytön keskitetyissä ruudukoissa, latausnäkymissä ja aina, kun haluat ruudukkolohkon olevan suuremman alueen keskellä.
<!-- Grid block centered inside the viewport -->
<div class="grid h-screen place-content-center gap-6" style="grid-template-columns: repeat(2, 200px)">
<div class="bg-sky-200 p-8 rounded text-center">Option A</div>
<div class="bg-sky-200 p-8 rounded text-center">Option B</div>
</div>Yksittäisten kohteiden ohitukset justify-self- ja align-self-ominaisuuksilla
Joskus yksi tietty kohde pitää saada toimimaan eri tavalla kuin ruudukon muut kohteet. justify-self-* ohittaa justify-items-asetuksen yhdessä solussa, ja align-self-* ohittaa align-items-asetuksen. Voit esimerkiksi käyttää justify-self-end-luokkaa siirtääksesi yksittäisen toimintopainikkeen solunsa oikeaan reunaan, kun kaikki muut solut pysyvät vasemmalle tasattuina.
<!-- Most items default, but last button right-aligned -->
<div class="grid grid-cols-3 gap-4 items-start">
<div class="bg-gray-100 p-4">Content A</div>
<div class="bg-gray-100 p-4">Content B</div>
<button class="justify-self-end bg-blue-500 text-white px-4 py-2 rounded self-center">
Action
</button>
</div>place-self – yksittäisen kohteen lyhenne
place-self-* on yksittäisen kohteen lyhenne, joka yhdistää align-self- ja justify-self-ominaisuudet. Tehokkain arvo on place-self-center, joka keskittää yksittäisen kohteen sekä vaaka- että pystysuunnassa solunsa sisällä riippumatta siitä, mitä ylätason ruudukko määrittää. Tämä on kätevää, kun kuvake tai latausilmaisin halutaan keskittää kiinteäkokoiseen ruudukkosoluun.
<!-- One loading spinner centered in its grid cell -->
<div class="grid grid-cols-3 gap-4 h-32">
<div class="bg-gray-100 p-4 rounded">Content</div>
<div class="bg-gray-100 rounded place-self-center">
<div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
</div>
<div class="bg-gray-100 p-4 rounded">Content</div>
</div>Ruudukon tasauksen kattava viite
Tässä on nopea mielikuva Tailwindin ruudukon tasauksesta: justify-items / align-items — tasaavat alikohteet solujen sisällä (kohdetaso). justify-content / align-content — sijoittavat koko ruudukkolohkon säilön sisälle (raitatason). justify-self / align-self — ohittavat yksittäisen kohteen tasauksen. Yhdistä näihin place-*-lyhenteet, kun haluat käsitellä molempia akseleita kerralla.
<!-- Summary: centered grid, stretched items, one overridden -->
<div class="grid grid-cols-3 gap-6 place-content-center place-items-center h-48">
<div class="w-20 h-20 bg-indigo-200 rounded flex items-center justify-center">A</div>
<div class="w-20 h-20 bg-indigo-300 rounded flex items-center justify-center">B</div>
<!-- Override: this item aligns to end instead of center -->
<div class="w-20 h-20 bg-indigo-400 rounded flex items-center justify-center self-end">
C
</div>
</div>Pikatesti
Testaa, miten hyvin hallitset tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opit, että gap-x-* ja gap-y-* hallitsevat vaaka- ja pystysuuntaisia välejä itsenäisesti, justify-items ja align-items sijoittavat sisällön kuhunkin ruudukkosoluun ja justify-content ja align-content sijoittavat koko ruudukon säilön sisälle. Seuraavaksi siirrymme koon apuohjelmiin, joilla hallitaan elementtien leveyksiä ja korkeuksia.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Gridin väli, perustelu ja tasaus” ilmainen?
Kyllä – oppitunnin ”Gridin väli, perustelu ja tasaus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Gridin väli, perustelu ja tasaus”?
Lisätkää grid-solujen välistä tilaa gap-x-*- ja gap-y-*-luokilla ja tasatkaa kohteet grid-alueiden sisällä justify-items-*- ja place-items-*-luokilla. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Gridin väli, perustelu ja tasaus”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Grid-sarakkeiden määrittäminen
- Sarakkeiden ja rivien yli ulottuminen
- Grid-rivit ja automaattinen sijoittelu
- Gridin väli, perustelu ja tasaus