Ruudukko voidaan määritellä risteäväksi joukkoksi pysty- ja vaakasuuntaisia ​​viivoja. CSS-ruudukkoasettelu jakaa sivun suuriin osiin. Grid-ominaisuus tarjoaa ruudukkopohjaisen asettelujärjestelmän, jossa on rivejä ja sarakkeita. Se tekee verkkosivujen suunnittelusta helppoa ilman asemointia ja kellumista. Ruudukkoasettelu antaa meille tavan luoda ruudukkorakenteita, jotka on kuvattu CSS:ssä, ei HTML:ssä.

Kuten taulukko, sen avulla käyttäjä voi kohdistaa elementit riveihin ja sarakkeisiin. Mutta taulukoihin verrattuna on helppo suunnitella asettelua CSS-ruudukon avulla. Voimme määrittää sarakkeita ja rivejä ruudukossa käyttämällä ruudukko-malli-rivit ja ruudukko-malli-sarakkeet ominaisuuksia.

Ristikkosäiliö voidaan luoda ilmoittamalla näyttö: ruudukko tai näyttö: inline-grid elementissä. Ruudukkosäiliö sisältää ruudukon kohteet, jotka on sijoitettu rivien ja sarakkeiden sisään.

Grid v/s Flexbox

Yleinen kysymys, joka yleensä herää, miten ruudukko eroaa flexboxista. Ruudukko on tarkoitettu kaksiulotteisille asetteluille (rivit ja sarakkeet samaan aikaan), kun taas flexboxia käytetään yksiulotteisissa asetteluissa (joko rivissä tai sarakkeessa). Flexboxia käytetään, kun kaiken on oltava suorassa linjassa.

Flexboxia käytetään elementtien järjestämiseen yhteen sarakkeeseen tai yhteen riviin. Toisaalta ruudukko on paras järjestää elementit useisiin sarakkeisiin ja riveihin.

Ymmärretään CSS:n ruudukko esimerkin avulla.

Esimerkki

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Lähtö