Režģi var definēt kā vertikālu un horizontālu līniju krustojošu kopu. CSS režģa izkārtojums sadala lapu galvenajās sadaļās. Režģa īpašums piedāvā uz režģi balstītu izkārtojuma sistēmu ar rindām un kolonnām. Tas atvieglo tīmekļa lapu noformēšanu bez pozicionēšanas un peldēšanas. Režģa izkārtojums sniedz iespēju izveidot režģa struktūras, kas attēlotas CSS, nevis HTML.
Līdzīgi kā tabula, tā ļauj lietotājam izlīdzināt elementus rindās un kolonnās. Taču, salīdzinot ar tabulām, ir viegli izveidot izkārtojumu, izmantojot CSS režģi. Mēs varam definēt kolonnas un rindas režģī, izmantojot režģis-veidne-rindas un režģis-veidne-kolonnas īpašības.
Režģa konteineru var izveidot, deklarējot displejs: režģis vai displejs: inline-grid uz elementa. Režģa konteiners satur režģa vienumus, kas ir ievietoti rindās un kolonnās.
Režģis v/s Flexbox
Bieži rodas jautājums, kā režģis atšķiras no flexbox. Režģis ir paredzēts divdimensiju izkārtojumiem (rindas un kolonnas vienlaikus), savukārt flexbox tiek izmantots viendimensijas izkārtojumiem (rindā vai kolonnā). Flexbox tiek izmantots, ja kaut kam ir jābūt taisnā līnijā.
Flexbox izmanto elementu sakārtošanai vienā kolonnā vai vienā rindā. No otras puses, režģī vislabāk ir sakārtot elementus vairākās kolonnās un rindās.
Izpratīsim CSS režģi, izmantojot piemēru.
Piemērs
.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 Izmēģiniet to tūlīt Izvade
