CSS Grid Flashcards

1
Q

What is CSS grid and what it replaces?

A

CSS grid is a new way to separate elements. It replaces the float mechanism.

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

When was it introduced? What about the old browsers?

A
  1. Old browsers do not support ~5% of the WWW.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How to make old browsers support our styling?

A

via feature detection: @supports not (display: grid).

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

What is the two-step grid process?

A

First you define a grid, then you position the items.

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

Where should we define the display: grid css property and value?

A

Should be defined in the container element (can simply be the body)

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

How to define the column and row sizes?

A

grid-template-columns: 15em auto 15em defines a 3 column grid with 4 tracks. To define rows: grid-template-rows

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

How to define a row to fill as much as possible content?

A

auto.

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

How to define a row to fill just the necessary space to the children elements to fit?

A

min-content

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

How to make an element span the whole line in a 3 column grid?

A

grid-column-start:1

grid-column-end: 4 (yes, 4… because it refers to the track)

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

What did I have to use to remove the vertical scrollbar of the grid-based layout?

A

margin: 0px and box-sizing: border-box

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

What is the fr? When is it useful?

A

fr is a fractional unit. It is useful when you want to divide the space in equal amounts of space (1fr 1fr instead of 50% 50%)

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

What does the minmax function do when defining a colum size?

A

defines the minimum and maximum size of the column

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

what does the fit-content(30em)?

A

it will fit the whole content in 30em. won’t allow the column size to above 30em even if the content wants more than that.

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

How to repeat the size 1fr 10 times without having to write it manually? Can it handle more than one size, e.g 1fr 3fr?

A

By using the function repeat(10, 1fr). just change to repeat(10, 1fr, 3fr)

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

Can repeat, autofill and minmax replace media queries to create responsive layouts?

A
Yes. e.g: .cakes {
  display: grid;
  grid-gap: 1em;
grid-template-columns: repeat(auto-fill, min-max(15em, 1fr));
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is the difference between auto-fill and auto-fit?

A

Auto-fill can create empty spaces and auto-fit will stretch the components.

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

What are the shorthands to define grid columns and rows?

A

grid and grid-template

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

What does the html properties lang=”he” dir=”rtl” do?

A

It makes the grid items to flow from the Right to Left.

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

What the grid flow does to the documents?

A

it changes how the elements float the documents: useful for localization where the orientation of the items change, eg: hebraic

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

When the implicit grid is created? How to control it? What is the default?

A

The implicit grid is created when the grid items does not fit the grid column/row defined. Using grid-auto-rows ( and grid-auto-columns) allows you to handle the size of the implicit added rows (which is default to auto)

21
Q

What does auto-flow do? how to do create a two-column grid with as many rows as necessary?

A

it allows defining how implicit and explicit items will be sized… grid: auto-flow 10em / 10em 10em

grid: / COLUMNS

22
Q

How are spaces in the HTML called? How is it called in the CSS grid?

A

Gutters and on grid is called gaps.

23
Q

How gaps are created in css grids?

A

grid-row-gap, grid-column-gap or just grid-gap to combine both

24
Q

what does the grid-column-end: -1 does?

A

The element will stretch until the end of the grid.

25
Q

what the negative numbers in the positioning mean?

A

the amount of rows STARTING FROM the end.

26
Q

Will alignment work without free space? What is a trick to make the body to consume the whole height of the dom?

A

NO. it won’t make any diference. Heigth: 100%;

27
Q

What is the diference between justify and align?

A

Justify defines the horizontal positioning and align defines the vertical positioning.

28
Q

Should we avoid removing things from its natural flow? Why?

A

Yes. Due to usability issues it might bring (tab order, for example)

29
Q

What does the grid-auto-flow: dense do?

A

It fills eventual empty spaces with a forward element and therefore disrupting natural flow

30
Q

what does the justfy-content do to the elements?

A

position them horizontally

31
Q

what does the justify-item do to the content of the elements

A

position the CONTENT of the element horizontally

32
Q

what does the justify-self do?

A

position the individual grid item horizontally

33
Q

which tools can be used to vizualize the grids?

A

firefox and chrome/edge

34
Q

how to name the first and fourth column edge of a grid? what is the convention?

A

grid-template-columns [edge-start] 1fr 1fr 1fr [edge-end]

35
Q

What is grid-template-areas? does it have limitations? where it is helpful?

A

allows defining names for the areas of the grid. has big limitations, works for simple layouts only. helpful to debug in the browsers and also to keep the code more readable.

36
Q

how to create a grid with two columns and as much as necessary rows with 10 em of size?

A

grid: auto-flow 10em / 20em 20em

37
Q

does grid also allow defining grid areas?

A

yes, allows pretty much anything. readability might be affected.

38
Q

will grid shorthand overwritte other stuff above, how to overcome it?

A

yes. define the grid shorthand first.

39
Q

how to define a grid with three rows and three columns with grid areas named?

A

grid: “header header header” min-content
“nav main aside” auto
“footer footer footer” min-content /
15em 1fr 1fr

40
Q

What are the four steps of a reponsive design?

A

1 - start with the most narrow breakpoint (layout);
2 - Make your window wider until the layout needs adjustments;
3 - Add a new breakpoint (media query) and make the adjustment
4 - Repeat step 2 and 3

41
Q

what are additional resources for responsive design?

A

intrinsic web design: talks.jensimmons.com

atomic design: atomicdesign.bradfrost.com

42
Q

What is a subgrid, how to declare and what is its biggest problem?

A

Subgrid is a grid within a grid which inherits the definition of the parent’s grid. declare as display: grid and grid-template-columns: subgrid. Its biggest problem is that is not fully supported by the browsers.

43
Q

How to overcome the subgrid problem of not being supported just yet?

A

use grid inside grids.

44
Q

What is base size and growth limit? is it related to minmax?

A

base size is the minimum size and growth limit is the maximum size. yes.

45
Q

what happens in a two colum screen where it has a 100 -> 200px of size and a fr 1 colum? when the fr column will start to grow? what is the fr size until then?

A

will start to grow only after the first column reaches 200px size. fr will be sized as min-content.

46
Q

Complete the phrase: Extra space will be evenly added to the tracks’ base size until…?

A

they hit their growth limit.

47
Q

Complete the phrase: Fractional unit tracks stays at its min-content until …?

A

all other treacks reach their growth limit.

48
Q

Complete the phrase: Auto grows past its growth limit only if there are no…?

A

fractional unit tracks competing with it.