Mriežku možno definovať ako množinu pretínajúcich sa vertikálnych a horizontálnych čiar. Rozloženie mriežky CSS rozdeľuje stránku na hlavné časti. Vlastnosť Grid ponúka systém rozloženia založený na mriežke s riadkami a stĺpcami. Umožňuje jednoduché navrhovanie webových stránok bez umiestňovania a plávania. Rozloženie mriežky nám umožňuje vytvárať štruktúry mriežky zobrazené v CSS, nie v HTML.

Podobne ako tabuľka umožňuje užívateľovi zarovnať prvky do riadkov a stĺpcov. V porovnaní s tabuľkami je však ľahké navrhnúť rozloženie pomocou mriežky CSS. Stĺpce a riadky na mriežke môžeme definovať pomocou grid-template-rows a mriežka-šablóna-stĺpce vlastnosti.

Mriežkový kontajner môže byť vytvorený deklarovaním displej: mriežka alebo zobrazenie: inline-grid na prvku. Kontajner mriežky obsahuje položky mriežky, ktoré sú umiestnené vo vnútri riadkov a stĺpcov.

Grid v/s Flexbox

Bežná otázka, ktorá vo všeobecnosti vyvstáva, ako sa mriežka líši od flexboxu. Mriežka je určená pre dvojrozmerné rozloženia (riadky a stĺpce súčasne), zatiaľ čo flexbox sa používa pre jednorozmerné rozloženia (buď v riadku alebo stĺpci). Flexbox sa používa, keď má byť čokoľvek v priamej línii.

pole zoradené v jazyku Java

Flexbox sa používa na usporiadanie prvkov do jedného stĺpca alebo do jedného riadku. Na druhej strane, mriežka je najlepšie usporiadať prvky do viacerých stĺpcov a riadkov.

Poďme pochopiť mriežku v CSS pomocou príkladu.

Príklad

 .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 

Výkon