Brainscape's Knowledge GenomeTM

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


See full index

Front-End Development > CSS Grid > Flashcards

CSS Grid Flashcards

1
Q

grid-template-areas

A

Allows you to name sections of your web page to use as values in the grid-row-start, grid-row-end, grid-column-start,grid-column-end, and grid-area properties.

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

Where is grid-template-areas declared?

A

This property is declared on grid containers.

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

What property do you use to overlap elements?

A

When overlapping elements, it is generally easiest to use the grid-area property with grid row names. Remember that grid-area will set the starting and ending positions for both the rows and columns of an item.

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

What are the 2 axes in a grid layout?

A

The column (or block) axis and the row (or inline) axis.

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

What does the column axis do in CSS grid?

A

The column axis stretches from top to bottom across the web page.

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

What does the row axis do in CSS grid?

A

The row axis stretches from left to right across the web page.

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

justify-items

A

A property that positions grid items along the inline, or row, axis. This means that it positions items from left to right across the web page.

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

Where is justify-items declared?

A

This property is declared on grid containers.

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

What are the available values for justify-items?

A

start
end
center
stretch

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

justify-items: start;

A

Aligns grid items to the left side of the grid area

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

justify-items: end;

A

Aligns grid items to the right side of the grid area

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

justify-items: center;

A

Aligns grid items to the center of the grid area

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

justify-items: stretch;

A

Stretches all items to fill the grid area

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

justify-content

A

We can use justify-content to position the entire grid along the row axis.

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

Where is justify-content declared?

A

This property is declared on grid containers.

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

What are the available values for justify-content?

A

start
end
center
stretch
space-around
space-between
space-evenly

NOTE: There are several other values that justify-content accepts, which you can read about on the Mozilla Developer Network.

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

justify-content: start;

A

Aligns the grid to the left side of the grid container

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

justify-content: end;

A

Aligns the grid to the right side of the grid container

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

justify-content: center;

A

Centers the grid horizontally in the grid container

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

justify-content: stretch;

A

Stretches the grid items to increase the size of the grid to expand horizontally across the container

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

justify-content: space-around;

A

Includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element

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

justify-content: space-between;

A

Includes an equal amount of space between grid items and no space at either end

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

justify-content: space-evenly;

A

Places an even amount of space between grid items and at either end

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

align-items

A

A property that positions grid items along the block, or column axis. This means that it positions items from top to bottom.

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

Where is align-items declared?

A

This property is declared on grid containers.

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

What are the available values for align-items?

A

start
end
center
stretch

NOTE: There are several other values that align-items accepts, which you can read about on the Mozilla Developer Network.

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

align-items: start;

A

Aligns grid items to the top side of the grid area

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

align-items: end;

A

Aligns grid items to the bottom side of the grid area

29
Q

align-items: center;

A

Aligns grid items to the center of the grid area

30
Q

align-items: stretch;

A

Stretches all items to fill the grid area

31
Q

align-content

A

Positions the rows along the column axis, or from top to bottom

32
Q

Where is align-content declared?

A

Declared on grid containers

33
Q

What are the available values for align-content?

A

start
end
center
stretch
space-around
space-between
space-evenly

NOTE: There are several other values that align-content accepts, which you can read about on the Mozilla Developer Network.

34
Q

align-content: start;

A

Aligns the grid to the top of the grid container

35
Q

align-content: end;

A

Aligns the grid to the bottom of the grid container

36
Q

align-content: center;

A

Centers the grid vertically in the grid container

37
Q

align-content: stretch;

A

Stretches the grid items to increase the size of the grid to expand vertically across the container

38
Q

align-content: space-around;

A

Includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element

39
Q

align-content: space-between;

A

Includes an equal amount of space between grid items and no space at either end

40
Q

align-content: space-evenly;

A

Places an even amount of space between grid items and at either end

41
Q

The ___________ and ___________ properties specify how all grid items contained within a single container will position themselves along the row and column axes, respectively.

A

justify-items and align-items

42
Q

justify-self

A

Specifies how an individual element should position itself with respect to the row axis

43
Q

What property will override justify-items for any item on which it is declared?

A

justify-self

44
Q

align-self

A

Specifies how an individual element should position itself with respect to the column axis

45
Q

What property will override align-items for any item on which it is declared?

A

align-self

46
Q

Where is justify-self declared?

A

This property is declared on grid items

47
Q

Where is align-self declared?

A

This property is declared on grid items

48
Q

__________ and __________ accept the same values as align-items and justify-items.

A

align-self and justify-self

49
Q

Name an instance in which we don’t know how much information we’re going to display

A

For example, consider online shopping. Often, these web pages include the option at the bottom of the search results to display a certain quantity of results or to display ALL results on a single page. When displaying all results, the web developer can’t know in advance how many elements will be in the search results each time.

50
Q

Implicit grid

A

The implicit grid is an algorithm built into the specification for CSS Grid that determines default behavior for the placement of elements when there are more than fit into the grid specified by the CSS.

51
Q

What is the default behavior of the implicit grid?

A

The default behavior of the implicit grid is as follows: items fill up rows first, adding new rows as necessary. New grid rows will only be tall enough to contain the content within them.

52
Q

What two properties to specify the size of grid tracks added implicitly within CSS Grid?

A

grid-auto-rows and grid-auto-columns

53
Q

Where is grid-auto-rows and grid-auto-columns declared?

A

These properties are declared on grid containers.

54
Q

grid-auto-rows

A

Specifies the height of implicitly added grid rows.

55
Q

grid-auto-columns

A

Specifies the width of implicitly added grid columns.

56
Q

________ and ________ accept the same values as their explicit counterparts, grid-template-rows and grid-template-columns:

pixels (px)
percentages (%)
fractions (fr)
the repeat() function

A

grid-auto-rows and grid-auto-columns

57
Q

How can you specify the order in which implicitly-added rows and columns are rendered?

A

grid-auto-flow

58
Q

grid-auto-flow

A

Specifies whether new elements should be added to rows or columns, and is declared on grid containers.

59
Q

What are the available values for grid-auto-flow?

A

row
column
dense

You can pair row or column with dense, like this: grid-auto-flow: row dense;

60
Q

grid-auto-flow: row;

A

Specifies the new elements should fill rows from left to right and create new rows when there are too many elements (default)

61
Q

grid-auto-flow: column;

A

Specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements

62
Q

grid-auto-flow: dense;

A

This keyword invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added

63
Q

Which three values do the justify-content and align-items properties share?

A

start, end, center

64
Q

Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what height would it have?

.grid {
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 100px);
grid-auto-rows: 60px;
grid-auto-columns: 70px;
}

A

60px

Any implicitly created rows will have the height specified by grid-auto-rows, not the height of the explicitly created rows.

65
Q

Imagine we have a grid with 2 explicitly defined rows and 2 explicitly defined columns and no other grid properties set in the CSS, with the following divs inside of it. If we added a <div class="box">E</div> to the HTML after box D, where would box E appear on the page

<div>A</div>

<div>B</div>

<div>C</div>

<div>D</div>

A

It would appear underneath box C in a new row

66
Q

Which of the following display values will set an element to be a grid container and inline?

A

inline-grid

67
Q

Imagine we have a grid with 4 items in it, with the following CSS properties. What width would the 3rd column be?

.grid {
grid-auto-columns: 100px 200px;
grid-auto-flow: column;
}

A

100px

The boxes will fill up implicitly created columns which alternate between being 100px and 200px. Odd rows will be 100px in size.

68
Q
A
69
Q
A

Front-End Development (4 decks)

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