Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Front End Engineer > Grid Layout > Flashcards

Grid Layout Flashcards

1
Q

hva trenger du for å sette opp et grid?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

hva er en grid container?

A

The grid container will be a parent element that contains grid items as children and applies overarching styling and positioning to them.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

hvordan skru på en grid container?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

hva har en grid-container default?

A

kun en kolonne

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

hvilken property bestemmer kolonnene i en grid?

A

grid-template-columns

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

hva gjør grid-template-columns (gtc)?

A

bestemmer antall kolonner, og bredden på hver kolonne.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

hvordan lage to kolonner som er 20 % og 50 % av en 1000px grid?

A 
.grid {
  display: grid;
  width: 1000px;
  grid-template-columns: 20% 50%;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

kan man bare legge på flere parametere på grid-teplate-columns for å få flere kolonner?

A

ja. Man kan også blande prosenter og piksler. F.eks.

grid-template-columns: 20px 40% 60px;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

hvordan vil selve html for en grid være strukturert?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

hvordan spesifisere rader på en grid?

A

grid-template-rows: x y z ..

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

hva sier prosentene i grid-template-rows og grid-template-columns?

A

de sier hvor stor prosentandel en rad eller kolonne skal utgjøre av griden.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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% ?

A

grid-template: 50px 50px / 25% 25% 25% 25%;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

hva er enheten “fr” ?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

hva gjør repeat()?

A

grid-template-columns: repeat(3, 100px); vil repetere 100px i tre kolonner.

du kan bruke fraksjoner med repeat. F.eks. repeat(3,1fr);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

hva gjør følgende

grid-template-columns: repeat(2, 20px 50px 20px)

A

lager seks kolonner hvor 20px 50px 20px gjentar seg

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

kan man bruke repeat() direkte i grid-template istednefor grid-template-rows/columns?

A

ja

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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?

A

.grid {
display: grid;
grid-template-columns: 200px minmax(200px, 500px) 200px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

hvordan kreve at en kolonne er mellom 60px og 300px?

A

minmax(60px,300px)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

hvordan lage et gap på 11px mellom hver rad?

A

grid-row-gap: 11px;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

hvordan sette grid gap på 25px per rad, og 15px per kolonne?

A

grid-grap: 25px 15px;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

hva er feil med denne: “grid-gap-rows: 20px”

A

grid-row-gap: 20px;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

hva er poenget med grid items?

A

at grids kan gå over flere rader og kolonner, ikke nødvewndigvis bare en rad eller kolonne. dette gir muligheten for veldig pene layouts!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

hva gjør denne

.item {
grid-row-start: 1;
grid-row-end: 3;
}

A

på et item inne i en grid, sier den at griden skal starte på rad en, og slutte på rad 3.

24
Q

på et item inne i en grid, sier den at griden skal starte på rad en, og slutte på rad 3.

A

.item {
grid-row-start: 1;
grid-row-end: 3;
}

25
Q

hvordan sette grid-row-start og grid-row-end sånn at en grid starter på rad 4, og slutter på rad 8?

A

.a {
grid-row-start: 4;
grid-row-end: 9;
}

26
Q

hvordan forenkle følgende

.item {
grid-row-start: 4;
grid-row-end: 6;
}

A

grid-row: 4 / 6;

27
Q

for grid, nevn et eksempel på en forenkling som har skråstrek, og et eksempel som ikke har det

A

grid-row: 4 / 6 (fra rad 4 til 5)
grid-gap: 15px 25px;
en hybrid: grid-template: 50px 50px / 25% 25% 25% 25%;

28
Q

la en kolonne gå fra kolonne 5, og bruke 3 kolonner

A

.item {
grid-column: 5 / span 3;
}

29
Q

hvordan ta opp rad 2-4 med span-syntaksen?

A

grid-row: 2 / span 3;

30
Q

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.

A

.item {
grid-area: 2 / 3 / 4 / span 5;
}

31
Q

hva er det ALLER første du må huske når du setter opp grid?

A

display: grid

32
Q

Hva gjør grid-template-areas? Gi et eksempel

A

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; }

33
Q

Hva er feil grid-area: “header header” “nav nav” “left right”
“footer footer”;

A

grid-template-areas: “header header” “nav nav” “left right”

“footer footer”

34
Q

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?

A 
.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;
}
35
Q

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?

A 
.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;
}
36
Q

.container {
display: grid;
grid-template: repeat(8, 200px) / repeat(6, 100px);
}

hvor mange rader, og hvor mange kolonner er det her?

A

8 rader og 6 kolonner.

37
Q

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.

A

.overlap {
background-color: lightcoral;
grid-area: 6 / 4 / 8 / 6;
}

38
Q

Hva gjør justify-items?

A

Justerer kolonner fra venstre til høyre. For eksempel: justify-items: center.

justify-items må legges i grid-containeren.

39
Q

Hva skjer hvis vi bruker justify-items: center i en grid-container?

A

Alt legges i midten av sin kolonne (fra venstre til høyre)

40
Q

hvorfor bruke justify-items: center?

A

det kan se penere ut når man skal plassere noe i flere kolonner

41
Q

La oss si at du har to kolonner. Hvordan midtjustere begge på siden når man ekspanderer?

A

justify-content

42
Q

hvilke parametere tar justify-content?

A

start, end, center, stretch, space-around,space-between,space-evently

43
Q

Hva er forskjellen på justify-items og justify-content?

A

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

44
Q

Hva er radversjonen av justify-items?

A

align-items

45
Q

Hvilke parametere tar align-items?

A

start, end, center, stretch (har ikke space-around, space-between og space-evenly sånn som justify-items)

46
Q

align-content vs. align-items?

A

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)

47
Q

Hvorfor bruke justify-self og align-self?

A

Dette kan man gjøre for å spesifisere hvordan enkelte items skal oppføre seg, og ikke helt kolonna/raden.

48
Q

Hva er et implicit grid?

A

Et grid som endrer seg når man får flere items enn man forventet

49
Q

hvordan kontrollere implicit grid?

A

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

50
Q

Hvordan spesifisere om man skal populere kolonner eller rader ved overflow?

A

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

51
Q

Hva er feilen her:

justify-item: center;

A

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.

52
Q

Hva er forskjellen på align-content space-around og space-between?

A

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.

53
Q

Hva om du vil gjøre align-content og justify-content på likt?

A

place-content. Ikke støttet av edge

54
Q

Når bruker du grid, og når bruker du flexbox?

A

flexbox er ment for 1-dimensjonalt layout, grid er ment for flere rader og kolonner på likt (rutenett)

55
Q

Hvordan løste de antall kolonner for små skjermer i tutorial?

A

@media for å definere max-width: 600px, så grid-template-columns: 100 %, sånn at alt kom kolonnevis nedover for små skjermer

Front End Engineer (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions