1. CSS grid

CSS grid är en teknik i CSS som gör att webbutvecklare lättare kan skapa responsiva layouter till webbsidor. Det har funnits andra metoder för att skapa webbplatslayouter, t.ex. tabeller, boxmodellen, floats och CSS-flexbox.

1.1 Vad är CSS-grid?

CSS grids är en layout med ett rutnät. CSS grids gör det lättare att forma webbsidan genom kolumner och rader. Då kan man lätt placera sina element på sin hemsida med hjälp av rutnätet.

1.2 Floats vs CSS-grid

CSS-egenskapen float är lätt att lära sig, men det finns även många nackdelar med float. Float-elementen är knutna till flödet i dokumentet, dvs de beror på hur ordningen på elementet är i HTML-dokumentet. Utseendet beror alltså på ordningen i HTML-dokumentet, vilket inte är bra. Innehåll och utseende ska ju vara separerade i HTML och CSS.

CSS-grid är inte beroende av ordning i HTML, där kan man i CSS designa utseendet oberoende på i vilken ordning elementen är placerade i HTML-dokumentet. CSS-grid är alltså smidigare och enklare att använda. Därför att innehåll och utseende är separerade och oberoende av varandra. Det går också att på ett enkelt sätt skapa responsiva sidor med olika design beroende på om sidan ska visas på t.ex. en mobil surfplatta eller dataskärm.

2. CSS-grid Cheat Sheet

display: grid; /* Set a wrapper to a css grid */
            
grid-template-columns: 33.3% 33.3%;   /* Creates 2 columns with % */
grid-template-columns: 1fr 1fr;         /* Creates 2 columns with fractions */
grid-template-columns: repeat(2,1fr);       /* Creates 2 columns with fractions */

grid-auto-rows: 200px;                  /* Sets row height to 200px */
grid-auto-rows: minmax(200px, auto);    /* Sets minimum row height to 200px and max to auto */

grid-template-rows: 200px 300px 400px 200px;        /* Creates 4 rows */
grid-template-rows: repeat(4, 200px);               /* Creates 4 rows */
grid-template-rows: repeat(4, minmax(200px, auto)); /* Creates 4 rows */

grid-column-gap: 10px;  /* Gap between columns */
grid-row-gap: 10px;     /* Gap between rows */
grid-gap: 10px;         /* Gap between columns and rows */

align-items: start;   /* Align items to the top */
align-items: end;     /* Align items to the end */
align-items: stretch; /* The default value (used if no other value is given) */
justify-items: start; /* Align items to the left */
justify-items: end;   /* Align items to the right */
justify-self: center; /* Aligns the item on the horizontal center */

grid-area: header; /* Gives an element the grid name header */

/* Defines a matrix for the layout, one string for each row */
grid-template-areas:
    "header  header"
    "aside   main"
    "nav     main"
    "section section"
    "section section"
    "footer  footer";