CSS Grid er en layout-teknologi i CSS, der giver mulighed for at opbygge komplekse layouter i en todimensionel grid-struktur. Det er en relativt ny teknologi, der blev tilføjet til CSS-specifikationen i 2017. CSS Grid giver mulighed for at opdele et HTML-dokument i et antal rækker og kolonner, der kan fylde forskellige mængder plads på skærmen.
For at bruge CSS Grid, skal du først definere en container ved hjælp af display: grid; i din CSS. Herefter kan du oprette rækker og kolonner ved hjælp af grid-template-rows og grid-template-columns. Her er et simpelt eksempel:
.container {
display: grid;
grid-template-rows: 100px 200px 100px;
grid-template-columns: 200px 200px;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1 / 2;
}
.item2 {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
I dette eksempel er .container vores grid container, og .item1 og .item2 er grid items. .item1 tager plads i den første og anden række af den første kolonne, og .item2 tager plads i den første række af den anden kolonne.