Ett rutnät kan definieras som en korsande uppsättning vertikala och horisontella linjer. CSS Grid-layout delar upp en sida i huvudsektioner. Grid Property erbjuder ett rutnätsbaserat layoutsystem med rader och kolumner. Det gör det enkelt att designa webbsidor utan att placera dem och flytta dem. Gridlayouten ger oss ett sätt att skapa rutnätsstrukturer avbildade i CSS, inte i HTML.

I likhet med tabellen gör den det möjligt för en användare att justera elementen i rader och kolumner. Men jämför med tabeller är det enkelt att designa layout med CSS-rutnätet. Vi kan definiera kolumner och rader i rutnätet genom att använda rutnät-mall-rader och rutnät-mall-kolumner egenskaper.

En rutnätsbehållare kan skapas genom att deklarera display: rutnät eller display: inline-grid på ett element. Rutnätsbehållare innehåller objekten i ett rutnät som är placerade inuti raderna och kolumnerna.

Grid v/s Flexbox

Det är en vanlig fråga som i allmänhet uppstår att hur gallret skiljer sig från flexboxen. Rutnätet är för tvådimensionella layouter (rader och kolumner samtidigt), medan flexboxen används för de endimensionella layouterna (antingen i en rad eller kolumn). Flexbox används när allt måste vara i en rak linje.

Flexbox används för att arrangera elementen i en kolumn eller i en enda rad. Å andra sidan är rutnätet bäst för att ordna elementen i flera kolumner och rader.

Låt oss förstå rutnätet i CSS med ett exempel.

Exempel

 .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 

Produktion