Brainscape's Knowledge GenomeTM

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


See full index

CSS > CSS Grid Layout > Flashcards

CSS Grid Layout Flashcards

1
Q

What’s the CSS grid?

A

The CSS grid is a two dimensional layout system
that lets you specify both columns and rows.

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

Is flexbox 2 dimensional CSS?

A

No, flexbox is 1 dimensional.

It can only do either a row or columns.

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

Is CSS grid an improvement over past methods?

A

Yes.

Floats, tables, and other CSS methods could easily break.

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

What is a grid container?

A

Grid containers establish formatting context for CSS items.

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

How does the CSS grid container control the grid items?

Name 3 ways

A

Grid containers control size, spacing, and alignment of grid items.

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

What is a grid item?

A

It’s a chunk of content that belongs to a grid container.

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

What are 4 examples of content that can be a grid item?

A

Header

Nav

Aside

Main

Footers

And their content

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

What direction to grid lines appear in?

A

Horizontal and vertical grid lines are possible

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

What number system do grid lines follow?

A

Start at 1 and increase in proportion to # of items

Apply to both columns and rows

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

Why are grid lines useful?

A

Grid lines help define columns and rows, by defining
their starting lines and end lines.

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

CSS Grid is a ______ layout system.

A

Two-dimensional layout system

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

Grid layout does not work together with flexbox.

True or False

A

False. Grid and flexbox are complementary layout
tools and have their specialties.

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

The _______ establishes the grid formatting context and manages how its direct child elements are spaced, sized, and aligned.

A

Grid Container

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

The direct children of a grid container are called _______.

A

Grid items

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

What divides the grid container’s space into columns and rows?

A

Grid lines

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

In the following code, the div with the class grid is the grid container. Which elements are the grid items?

A

See image

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

What are grid tracks?

A

Space between two grid lines that define columns and rows of grid

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

What do grid template columns control?

A
  • Set column tracks
  • Number of values
  • Space of column
  • Establishes size of columns
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What do grid template rows do?

A
  • Set row tracks
  • Number of rows
  • Height of row
  • Establishes size of rows
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How do you separate values for columns and rows?

A

Spaces

No commas

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

What does this communicate about the columns type?

A

3 columns

200 px each

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

What measurements can you use to define widths
of columns and heights of rows?

A

Pixels

Percentages

EM

REM

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

What does the auto value do?

A

adjusts size to fill available space

leaves no gaps around edges

auto is flexible, adjusting automatically to fill up space

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

What does the auto value do in the column context?

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

What is an implicit row/column?

A

It’s a section of context not explicitly defined in size.

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

What are the 2 rules for implicit rows?

A

by default, rows populate based on amount of content

by default, rows are as tall as content they hold

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

What does grid-template-rows create?

A

Rows

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

What does grid-template-columns create?

A

columns

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

What does the values communicate for the row section?

A

just 1 value: sets height of 1st row

adding 2nd value sets height of second row

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

What do grid gaps do?

A

They add space between columns and rows.

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

What’s the CSS property to add column gaps?

A

grid-column-gap

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

What CSS property do you use to add space between rows?

A

grid-row-gap

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

How do you write grid gap shorthand?

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

In grid gap shorthand, which comes first row or column?

A

Row first value

Column second value

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

What happens if you set only 1 value?

grid-gap: 15px;

A

Sets value for both columns and rows

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

How many grid lines do you need at the minimum?

A

Columns/rows need 2 lines

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

The first step to using grid is defining a grid container.

Target .container and make it a grid container

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

What’s the first step to enable or create a CSS grid?

A

display:grid;

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

Next declare three row tracks in a grid container

Set the first row track to 200px

Second to 300px

Third to 100px

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

Set the 3 column tracks in this order: 200px 400px 200px

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

Apply a 20px gutter to rows and columns

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

What is fr stand for?

A

Fraction unit

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

Why is fr useful?

A

Responsive design

Work in different browser sizes

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

What does fr do?

A

Expand and contract based on free space in grid

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

Does fr do calculations?

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

What does 1fr represent?

A

It represents 1 fraction of available space

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

Why use fr?

A

It simplifies measurements by doing the math for you.

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

What’s the math of this code snippet?

A

1000px max

-200px fixed 3 column

1 fr for column 2

1 fr for column 1

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

With percentages, what number does it need to add up to?

A

100%

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

Are these column values equal or different?

A

Equal in fr and percentages

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

What does the 2fr do compared to 1fr?

A

2fr takes up twice as much space as 1fr

52
Q

Set four column tracks using a unit that represents a fraction of the available space inside the grid container.

The first track should take up 2 fractions, and the remaining tracks should take up 1 fraction.

include all css

A
53
Q

Does every column need a value?

A

Even with 4 columns, every column gets a value

54
Q

What is the repeat() notation?

A

It communicates duplicates in a succinct way.

55
Q

What does the repeat notation convey in this code snippet?

A

3

1fr

56
Q

Why use repeat() notation?

A

To avoid repeating yourself

To communicate more clearly what you want & how many times

57
Q

How would you rewrite this code snippet with repeat notation?

A
58
Q

Do you need commas between row or column values?

A

No just spaces

59
Q

What does minmax() do?

A

It establishes minimum and maximum size to
get sizing rules just right

60
Q

What does this code snippet on minmax communicate?

A

min: 200px doesn’t get smaller/narrower
max: 300px doesn’t get larger/wider

61
Q

How many columns defined in this code snippet?

A

3 columns defined here

  1. minmax(200px, 300px)
  2. 1fr
  3. 1fr
62
Q

How does minmax math work in this context?

A

Max is total - (minmax) = left over (divided by 2, 1fr to use full space

63
Q

Can you combine repeat with minmax?

A

Yes

64
Q

What is the advantage of using auto-fit or auto fill?

A

Helps prevent writing media queries

Generate as many spaces available, without overflow

Auto generate tracks to take up width of container

65
Q

What does auto-fill do?

A

Let’s the browser decide how many to fit into container, without overflowing, with gaps into account of measurement

66
Q

Does auto-fill generate empty columns?

A
67
Q

What does this do to divide the column space?

A

Minimum of 60 px

Divide remaining space by 1fr

68
Q

What does auto-fit do?

A

Remove fixed column number, replace with auto-fit

Automatically resizes columns based on browser size

69
Q

What’s the difference between auto-fill and auto-fit?

A

auto-fill: as many as necessary (even with empty tracks)

auto-fit: collapses empty tracks, visible grid items expand to fit, no empty space

70
Q

Use repeat notation to declare column tracks. The repeat value should be the keyword that collapses any empty tracks and auto-generates columns to fit the available space. Then, set the track sizes using the function that sets a track’s minimum and maximum size. The min size should be 300px, and the max size should be 1 fraction of the available space.

A
71
Q

What is explicit grid?

A

what you define,

of rows, #of columns

72
Q

What is implicit grid?

A

dynamically generated

varies size

73
Q

What’s the advantage of using implicit grid rules?

A

ideal for uncertainty

positions extra items outside of grid

determine placement and size–

74
Q

What triggers implicit grid?

A

More items than accounted for

75
Q

If your explicit grid fits 6 items

BUT you have 8 items in container

What happens?

A

You create an implicit grid for those items that don’t fit.

76
Q

What determines the height of implicit grids?

A

Implicit tracks auto sized by default

Height is as tall as content

77
Q

Should you create rules for implicit grids?

A

You should plan for intended and unintended

aspects of grid to account for for items not accounted for

78
Q

What CSS properties setup implicit rows and columns?

A

grid-auto-rows: implicit row tracks

grid-auto-columns: implicit column track

79
Q

What happens with this implicit row?

A

All rows are at least 250px

Creates implicit rows based off of grid-auto-rows

80
Q

What does this combination of minmax and auto rows do?

A

Establishes a minimum size of 150px

Grows up to space available via auto

81
Q

What does grid auto flow do?

A

auto flow specifies rows or columns for implicit grid rules

82
Q

What’s the default value of grid-auto-flow?

A

row

83
Q

If you need auto flow for columns what do you specify?

A

grid-auto-flow: column;

84
Q

If there are too many items to fit inside the grid you defined, the grid container generates a to accommodate the extra items.

A

an implicit grid

85
Q

Given the following declaration:

grid-template-columns: 1fr 1fr 1fr 1fr;

How can you rewrite the track listing?

A

grid-template-columns: repeat(4, 1fr);

86
Q

Which CSS unit represents a fraction of the
available space inside the grid container?

A

fr

87
Q

Which of the following will generate as many tracks as necessary to fit the available space, without causing the grid to overflow?

A

auto-fit

88
Q

Which property controls the size of implicit column tracks?

A

grid-auto-columns

89
Q

The grid you define with grid-template-rows
and grid-template-columns is called

A

the explicit grid

90
Q

What tool does firefox provide to inspect the grid online?

A

Firefox Grid Inspector Tool

91
Q

What does the waffle icon do to the grid?

A
92
Q

Why is the firefox grid inspector tool useful?

A

See grid lines and gaps in browser are visible

93
Q

Visually, can you tell the difference between grid lines and gutters ?

A

Yes

You can even color grid lines to improve visibility

94
Q

What does it mean to position items by grid lines?

A

You can define the start and end of columns and rows based on the gridline it starts and ends on.

95
Q

What does grid-column-start do?

A

grid-column-start defines the starting grid line of a column

96
Q

What does grid-column-end define?

A

The ending grid line for columns.

97
Q

What does grid-row-start do?

A

It defines the starting grid line for a row

98
Q

What does grid-row-end define?

A

The ending grid line that defines a row

99
Q

Why would you use a -1 negative grid line?

A

-1 grid line always stretches full width, regardless of future changes

100
Q

How can negative grid lines be used?

A

Use them by counting backwards

101
Q

What happens with this negative grid line in the footer?

A

Footer stretches

Fixed to bottom

102
Q

What’s the syntax for grid lines in shorthand?

A
103
Q

Which value comes first with shorthand grid lines?

A

first line/ end line

104
Q

Can you position items based on their name?

A

Yes, with names defined for a grid area you
can specify their position in the grid.

105
Q

What’s the CSS property for using named grid template areas?

A

grid-template-areas

106
Q

With grid template areas, what CSS property do you use?

A

grid-area

107
Q

Can you give any name to a grid area?

A

Yes

108
Q

After you label the grid area, how do you use it?

A

In the CSS, you specify grid-template-areas property, the values correspond with the desired layout.

109
Q

What’s the advantage of using grid areas?

A

You have reusable sections

110
Q

Can you adjust the grid based on screen size?

A

Yes

111
Q

Can you combine grid adjustments with media queries?

A

Yes

112
Q

When you see grid items stacked in 1 column, what device is it most suitable for?

A

Mobile devices

113
Q

What’s an ideal pixel value for tablet?

A

768px

114
Q

Are tablets wide enough to handle 3 columns?

A

They can be, yes

115
Q

What pixel unit do you use for desktop?

A

min-width: 992px

116
Q

Can you define the grid for desktop?

A

Yes

117
Q

Can you use flexbox and grid together?

A

YES

Flexbox and grid are complementary

Each version has its specialty

118
Q

What dimensions do flexbox and CSS grid follow?

A

Grid: two dimensional

Flexbox: one dimensional

119
Q

How do you create empty grid cells inside grid-template-areas strings?

A

use a period .

120
Q

Children of a grid container can be both grid items and flex containers?

A

False. Grid items cannot define a flex formatting context.

121
Q

Which properties let you use a grid line
numbers to control how items are placed on the grid?

A

grid-row and grid-column

122
Q

The grid area name must match the selector name

True or false

A

False.

You can name a grid area anything you want

123
Q

Which tool displays visual representation of your grid to help you inspect grid tracks, grid lines, and gutters?

A

Firefox grid inspector

124
Q

If you want an aside column to always run next to the footer, how would you specify it?

A

Using a -1 negative grid line value

125
Q
A

CSS (8 decks)

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