Introduktion till CSS Grid
CSS Grid är ett sätt att placera element samtidigt både horisontellt och vertikalt. Det är en mer avancerad metod jämfört med flex, men mer komplex att bemästra.
För att skapa ett grid måste du sätta
egenskapen display
till värdet grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Efter detta kommer elementet att förvandlas till ett tvådimensionellt rutnät, där element placeras vertikalt (kolumner) och horisontellt (rader). Området i skärningspunkten mellan en kolumn och en rad kallas för en cell.
Med hjälp av speciella egenskaper kan du placera element både på rader och kolumner. Detta gör det enkelt att skapa, till exempel, sådana här saker:
I de följande lektionerna kommer vi först att lära oss att placera element på kolumner, sedan gå vidare till att studera rader, och efter det kombinera allt detta.
