Grid Layout Flashcards
hva trenger du for å sette opp et grid?
To set up a grid, you need to have both a grid container and grid items. The grid container will be a parent element that contains grid items as children and applies overarching styling and positioning to them.
hva er en grid container?
The grid container will be a parent element that contains grid items as children and applies overarching styling and positioning to them.
hvordan skru på en grid container?
To turn an HTML element into a grid container, you must set the element’s display property to one of two values:
grid — for a block-level grid.
inline-grid — for an inline grid.
hva har en grid-container default?
kun en kolonne
hvilken property bestemmer kolonnene i en grid?
grid-template-columns
hva gjør grid-template-columns (gtc)?
bestemmer antall kolonner, og bredden på hver kolonne.
hvordan lage to kolonner som er 20 % og 50 % av en 1000px grid?
.grid {
display: grid;
width: 1000px;
grid-template-columns: 20% 50%;
}kan man bare legge på flere parametere på grid-teplate-columns for å få flere kolonner?
ja. Man kan også blande prosenter og piksler. F.eks.
grid-template-columns: 20px 40% 60px;
hvordan vil selve html for en grid være strukturert?
div class=grid
barn: div class=box a, div class=box b, etc…
box er en egen klasse som sier hvordan være boks i griden skal se ut.
CSS-klassen har .grid {
display: grid;
display-template-columns: …….;
} og vanlig layout for .box
hvordan spesifisere rader på en grid?
grid-template-rows: x y z ..
hva sier prosentene i grid-template-rows og grid-template-columns?
de sier hvor stor prosentandel en rad eller kolonne skal utgjøre av griden.
hva er en snarvei for grid-template-rows og grid-template-columns?
f.eks. grid-template-rows: 50px 50px
grid-template-columns: 25% 25% 25% 25% ?
grid-template: 50px 50px / 25% 25% 25% 25%;
hva er enheten “fr” ?
fraksjon. Brukes for å enklere unngå overflow i grid. Man sier bare hvor stor fraksjon noe skal utgjøre av en grid i forhold til andre kolonner/rader. F.eks.
2fr 1fr 1fr av 100px vil tildele 50px til den ene kolonna/raden, 25px til de to andre.
når “fr” blandes med andre enheter, tilsvarer det fraksjonen av plassen som er tilgjengelig. F.eks. hvis en kolonne allerede har 60px, og 1fr finnes for kolonne 2 for en plass på 100px, er den andre kolonnen på 40px.
hva gjør repeat()?
grid-template-columns: repeat(3, 100px); vil repetere 100px i tre kolonner.
du kan bruke fraksjoner med repeat. F.eks. repeat(3,1fr);
hva gjør følgende
grid-template-columns: repeat(2, 20px 50px 20px)
lager seks kolonner hvor 20px 50px 20px gjentar seg
kan man bruke repeat() direkte i grid-template istednefor grid-template-rows/columns?
ja
hvis du har et bilde på 200px i den midterste kolonna i griden din, og du ikke vil at griden som har bildet blir mindre enn 200px. Hva gjør du?
.grid {
display: grid;
grid-template-columns: 200px minmax(200px, 500px) 200px;
}
hvordan kreve at en kolonne er mellom 60px og 300px?
minmax(60px,300px)
hvordan lage et gap på 11px mellom hver rad?
grid-row-gap: 11px;
hvordan sette grid gap på 25px per rad, og 15px per kolonne?
grid-grap: 25px 15px;
hva er feil med denne: “grid-gap-rows: 20px”
grid-row-gap: 20px;
hva er poenget med grid items?
at grids kan gå over flere rader og kolonner, ikke nødvewndigvis bare en rad eller kolonne. dette gir muligheten for veldig pene layouts!
hva gjør denne
.item {
grid-row-start: 1;
grid-row-end: 3;
}
på et item inne i en grid, sier den at griden skal starte på rad en, og slutte på rad 3.
på et item inne i en grid, sier den at griden skal starte på rad en, og slutte på rad 3.
.item {
grid-row-start: 1;
grid-row-end: 3;
}
hvordan sette grid-row-start og grid-row-end sånn at en grid starter på rad 4, og slutter på rad 8?
.a {
grid-row-start: 4;
grid-row-end: 9;
}
hvordan forenkle følgende
.item {
grid-row-start: 4;
grid-row-end: 6;
}
grid-row: 4 / 6;
for grid, nevn et eksempel på en forenkling som har skråstrek, og et eksempel som ikke har det
grid-row: 4 / 6 (fra rad 4 til 5)
grid-gap: 15px 25px;
en hybrid: grid-template: 50px 50px / 25% 25% 25% 25%;
la en kolonne gå fra kolonne 5, og bruke 3 kolonner
.item {
grid-column: 5 / span 3;
}
hvordan ta opp rad 2-4 med span-syntaksen?
grid-row: 2 / span 3;
sett følgende på enklest mulige måte
grid-row-start=2
grid-column-start=3
grid-row-end=4
grid-column-end=tar opp 5 kolonner.
.item {
grid-area: 2 / 3 / 4 / span 5;
}
hva er det ALLER første du må huske når du setter opp grid?
display: grid
Hva gjør grid-template-areas? Gi et eksempel
Lar deg navngi seksjoner på websiden for bruk i grid-area, grid-row-start, grid-row-end , grid-column-start eller grid-column-end.
Et eksempel er at du har to div klasser “top_menu” og “main”. Når du definerer grid-template-areas, bruker du “top_menu head” som parameter. I grid-containeren der hvor du også definerer “display: grid”. På hvert item. F.eks. .top_menu{ grid-area: top_menu; }
Hva er feil grid-area: “header header” “nav nav” “left right”
“footer footer”;
grid-template-areas: “header header” “nav nav” “left right”
“footer footer”
Hvordan ser grid-containeren ut hvis du ønsker å ha to headere, og så splitte opp i to kolonner under dem, og så ha en footer med en kolonne?
.container {
display: grid;
max-width: 900px;
position: relative;
margin: auto;
grid-gap: 10px;
grid-template-areas: "header header" "nav nav" "left right"
"footer footer";
grid-template-columns: 200px 400px;
grid-template-rows: 150px 200px 600px 200px;
}Hvordan ser grid-containeren ut hvis du ønsker å ha to headere, og så splitte opp i to kolonner under dem, og så ha en footer med en kolonne?
.container {
display: grid;
max-width: 900px;
position: relative;
margin: auto;
grid-gap: 10px;
grid-template-areas: "header header" "nav nav" "left right"
"footer footer";
grid-template-columns: 200px 400px;
grid-template-rows: 150px 200px 600px 200px;
}.container {
display: grid;
grid-template: repeat(8, 200px) / repeat(6, 100px);
}
hvor mange rader, og hvor mange kolonner er det her?
8 rader og 6 kolonner.
inside the .overlap ruleset, add the grid-area property.
Set its value so that the overlap element spans the 6th and 7th rows and the 4th and 5th columns.
.overlap {
background-color: lightcoral;
grid-area: 6 / 4 / 8 / 6;
}
Hva gjør justify-items?
Justerer kolonner fra venstre til høyre. For eksempel: justify-items: center.
justify-items må legges i grid-containeren.
Hva skjer hvis vi bruker justify-items: center i en grid-container?
Alt legges i midten av sin kolonne (fra venstre til høyre)
hvorfor bruke justify-items: center?
det kan se penere ut når man skal plassere noe i flere kolonner
La oss si at du har to kolonner. Hvordan midtjustere begge på siden når man ekspanderer?
justify-content
hvilke parametere tar justify-content?
start, end, center, stretch, space-around,space-between,space-evently
Hva er forskjellen på justify-items og justify-content?
justify-items - Aligns the content inside a grid item along the row axis
justify-content - This property aligns the grid along the row axis
begge posisjonerer fra venstre til høyre
Hva er radversjonen av justify-items?
align-items
Hvilke parametere tar align-items?
start, end, center, stretch (har ikke space-around, space-between og space-evenly sånn som justify-items)
align-content vs. align-items?
align-content: Tar hele innholdet i en full kolonne. align-items tar kun hvert enkelt grid item. justerer opp og ned (siden det heter align, og ikke justify)
Hvorfor bruke justify-self og align-self?
Dette kan man gjøre for å spesifisere hvordan enkelte items skal oppføre seg, og ikke helt kolonna/raden.
Hva er et implicit grid?
Et grid som endrer seg når man får flere items enn man forventet
hvordan kontrollere implicit grid?
grid-auto-rows and grid-auto-columns
grid-auto-rows specifies the height of implicitly added grid rows. grid-auto-columns specifies the width of implicitly added grid columns.
grid-template-rows and grid-template-columns
Hvordan spesifisere om man skal populere kolonner eller rader ved overflow?
grid-auto-flow accepts these values:
row — specifies the new elements should fill rows from left to right and create new rows when there are too many elements (default)
column — specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements
dense — this keyword invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added
Hva er feilen her:
justify-item: center;
det finnes ikke noe “justify-item” for et enkelt item. Da blir det justify-self. “justify-items” settes på en container, f.eks. “justify-items: start” for å sette alle items til venstre.
Hva er forskjellen på align-content space-around og space-between?
space-around legger tomrommet rundt. Altså du vil få et tomrom helt til først. Space-between legger tomrommet mellom hver rad. Altså du vil ikke se noe tomrom før første kolonne, men mellom hver.
Hva om du vil gjøre align-content og justify-content på likt?
place-content. Ikke støttet av edge
Når bruker du grid, og når bruker du flexbox?
flexbox er ment for 1-dimensjonalt layout, grid er ment for flere rader og kolonner på likt (rutenett)
Hvordan løste de antall kolonner for små skjermer i tutorial?
@media for å definere max-width: 600px, så grid-template-columns: 100 %, sånn at alt kom kolonnevis nedover for små skjermer
