Skip to content
CSS
(EXTRA) Flex & Grid
Flex
Lite mer info:
// Sätt elementet (tex “div” eller container ) som display:flex;. Dess innehåll får då möjligheten att bli flexibelt vad deet gäller storlek och position. Antingen som en “row” eller “column”. Den “lila” delen i bilden ovan
.my-container {
display:flex;
}
.my-container {
flex-direction: row;
/* Kan välja mellan flow-direction: tex. row eller column för att ha dragspelet längs med höjden eller bredden*/
}
// Sätt sedan så att alla element inuti containern har ett “flex”-värde. Så att den kan fördela sin bredd inuti flex-containern. De “orangea” delarna i bilden ovan.
// Flex 2 blir dubbelst så stor som flex 1 i det gemensamma utrymmet på bredden eller höjden.
.mitt-flixibla-element {
flex:1;
}
.mitt-andra-flixibla-element {
flex:2;
}
Grid
Grid använder du för mer helhets-layouts, i samma stil som i Figma.
Kan kombineras med “Flex”-elements som används i de mer specifika ytorna om man vill.
Det går även att med “Flex” få till likadana vyer men med en annan typ av kontroll.
Detta sätter du i det yttre elementet, på samma vis som med flex, men istället för att styra uppdelning av avstånd och hur mycket plats som ska tas av elements inne i varje element så gör man det från det stora, yttre elementet:
.mitt-yttre-grid-element {
/* Informera om att detta element ska vara ett GRID-element*/
display:grid;
/* Rita ut hur mycket plats varje kolumn ska ta och hur många kolumner ska finnas */
/* fr (fragment) är precis som "flex" , alltså hur stor andel av ytan som ska tas upp av varje ruta. Om en kolumn har 2fr och en annan kolumn har 1fr så tar den första upp dubbelt så mycket utrymme./*
/* Här nedan är 8 stycken kolumner som tar olika mycket utrymme i bredd*/
grid-template-columns:
2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/* Rita ut hur mycket plats varje rad ska ta och hur många rader ska finnas */
/* fr (fragment) är precis som "flex" , alltså hur stor andel av ytan som ska tas upp av varje ruta. Om en rad/row har 3fr och en annan rad/row har 1fr så tar den första upp tre gånger så mycket utrymme./*
/* Här nedan är 3 stycken rader som tar olika mycket utrymme i höjd*/
grid-template-rows:
3fr /* kommer ta upp tre gånger så mycket som 1fr */
2fr /* kommer ta upp dubbelt så mycket som 1fr */
1fr;
/* Rita ut hur alla namngivna element ska ligga i rutnätet och hur många rutor de ska ta upp. OBS måste matcha rutnätet ovan och namnen ska vara "grid-area"-namnen */
grid-template-areas:
"ruta1 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2"
"ruta1 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2"
"ruta1 KNAPPEN KNAPPEN botten botten botten botten botten";
}
Såhär namnger du de olika elementen som finns i “Grid”-elementet. OBS behöver ej vara samma som ID-namnet eller klass-namnet. Detta grid-area-namn används sedan ovan för “grid-template-areas:”
#ett-element-i-gridden {
grid-area: ruta2;
background-color: red;
}
Grid-info för desktop & mobile:
Grid-Info för grid i Figma
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.