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.
2
Q
Is flexbox 2 dimensional CSS?
A
No, flexbox is 1 dimensional.
It can only do either a row or columns.
3
Q
Is CSS grid an improvement over past methods?
A
Yes.
Floats, tables, and other CSS methods could easily break.
4
Q
What is a grid container?
A
Grid containers establish formatting context for CSS items.
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.
6
Q
What is a grid item?
A
It’s a chunk of content that belongs to a grid container.
7
Q
What are 4 examples of content that can be a grid item?
A
Header
Nav
Aside
Main
Footers
And their content
8
Q
What direction to grid lines appear in?
A
Horizontal and vertical grid lines are possible
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
10
Q
Why are grid lines useful?
A
Grid lines help define columns and rows, by defining
their starting lines and end lines.
11
Q
CSS Grid is a ______ layout system.
A
Two-dimensional layout system
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.
13
Q
The _______ establishes the grid formatting context and manages how its direct child elements are spaced, sized, and aligned.
A
Grid Container
14
Q
The direct children of a grid container are called _______.
A
Grid items
15
Q
What divides the grid container’s space into columns and rows?
A
Grid lines
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
17
Q
What are grid tracks?
A
Space between two grid lines that define columns and rows of grid
18
Q
What do grid template columns control?
A
- Set column tracks
- Number of values
- Space of column
- Establishes size of columns
19
Q
What do grid template rows do?
A
- Set row tracks
- Number of rows
- Height of row
- Establishes size of rows
20
Q
How do you separate values for columns and rows?
A
Spaces
No commas
21
Q
What does this communicate about the columns type?
A
3 columns
200 px each
22
Q
What measurements can you use to define widths
of columns and heights of rows?
A
Pixels
Percentages
EM
REM
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
24
Q
What does the auto value do in the column context?
A
25
What is an implicit row/column?
It's a section of context not explicitly defined in size.
26
What are the 2 rules for implicit rows?
by default, rows populate based on amount of content
by default, rows are as tall as content they hold
27
What does grid-template-rows create?
Rows
28
What does grid-template-columns create?
columns
29
What does the values communicate for the row section?
just 1 value: sets height of 1st row
adding 2nd value sets height of second row
30
What do grid gaps do?
They add space between columns and rows.
31
What's the CSS property to add column gaps?
grid-column-gap
32
What CSS property do you use to add space between rows?
grid-row-gap
33
How do you write grid gap shorthand?
34
In grid gap shorthand, which comes first row or column?
Row first value
Column second value
35
What happens if you set only 1 value?
grid-gap: 15px;
Sets value for both columns and rows
36
How many grid lines do you need at the minimum?
Columns/rows need 2 lines
37
The first step to using grid is defining a grid container.
Target .container and make it a grid container
38
What's the first step to enable or create a CSS grid?
display:grid;
39
Next declare three row tracks in a grid container
Set the first row track to 200px
Second to 300px
Third to 100px
40
Set the 3 column tracks in this order: 200px 400px 200px
41
Apply a 20px gutter to rows and columns
42
What is fr stand for?
Fraction unit
43
Why is fr useful?
Responsive design
Work in different browser sizes
44
What does fr do?
Expand and contract based on free space in grid
45
Does fr do calculations?
46
What does 1fr represent?
It represents 1 fraction of available space
47
Why use fr?
It simplifies measurements by doing the math for you.
48
What's the math of this code snippet?
1000px max
-200px fixed 3 column
1 fr for column 2
1 fr for column 1
49
With percentages, what number does it need to add up to?
100%
50
Are these column values equal or different?
Equal in fr and percentages
51
What does the 2fr do compared to 1fr?
2fr takes up twice as much space as 1fr
52
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
53
Does every column need a value?
Even with 4 columns, every column gets a value
54
What is the repeat() notation?
It communicates duplicates in a succinct way.
55
What does the repeat notation convey in this code snippet?
3
1fr
56
Why use repeat() notation?
To avoid repeating yourself
To communicate more clearly what you want & how many times
57
How would you rewrite this code snippet with repeat notation?
58
Do you need commas between row or column values?
No just spaces
59
What does minmax() do?
It establishes minimum and maximum size to
get sizing rules just right
60
What does this code snippet on minmax communicate?
min: 200px doesn’t get smaller/narrower
max: 300px doesn’t get larger/wider
61
How many columns defined in this code snippet?
3 columns defined here
1. minmax(200px, 300px)
2. 1fr
3. 1fr
62
How does minmax math work in this context?
Max is total - (minmax) = left over (divided by 2, 1fr to use full space
63
Can you combine repeat with minmax?
Yes
64
What is the advantage of using auto-fit or auto fill?
Helps prevent writing media queries
Generate as many spaces available, without overflow
Auto generate tracks to take up width of container
65
What does auto-fill do?
Let’s the browser decide how many to fit into container, without overflowing, with gaps into account of measurement
66
Does auto-fill generate empty columns?
67
What does this do to divide the column space?
Minimum of 60 px
Divide remaining space by 1fr
68
What does auto-fit do?
Remove fixed column number, replace with auto-fit
Automatically resizes columns based on browser size
69
What's the difference between auto-fill and auto-fit?
**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
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.
71
What is explicit grid?
what you define,
of rows, #of columns
72
What is implicit grid?
dynamically generated
varies size
73
What's the advantage of using implicit grid rules?
ideal for uncertainty
positions extra items outside of grid
determine placement and size--
74
What triggers implicit grid?
More items than accounted for
75
If your explicit grid fits 6 items
BUT you have 8 items in container
What happens?
You create an implicit grid for those items that don't fit.
76
What determines the height of implicit grids?
Implicit tracks auto sized by default
Height is as tall as content
77
Should you create rules for implicit grids?
You should plan for intended and unintended
aspects of grid to account for for items not accounted for
78
What CSS properties setup implicit rows and columns?
grid-auto-rows: implicit row tracks
grid-auto-columns: implicit column track
79
What happens with this implicit row?
All rows are at least 250px
Creates implicit rows based off of grid-auto-rows
80
What does this combination of minmax and auto rows do?
Establishes a minimum size of 150px
Grows up to space available via auto
81
What does grid auto flow do?
auto flow specifies rows or columns for implicit grid rules
82
What's the default value of grid-auto-flow?
row
83
If you need auto flow for columns what do you specify?
grid-auto-flow: column;
84
If there are too many items to fit inside the grid you defined, the grid container generates a to accommodate the extra items.
an implicit grid
85
Given the following declaration:
grid-template-columns: 1fr 1fr 1fr 1fr;
How can you rewrite the track listing?
grid-template-columns: repeat(4, 1fr);
86
Which CSS unit represents a fraction of the
available space inside the grid container?
fr
87
Which of the following will generate as many tracks as necessary to fit the available space, without causing the grid to overflow?
auto-fit
88
Which property controls the size of implicit column tracks?
grid-auto-columns
89
The grid you define with grid-template-rows
and grid-template-columns is called
the explicit grid
90
What tool does firefox provide to inspect the grid online?
Firefox Grid Inspector Tool
91
What does the waffle icon do to the grid?
92
Why is the firefox grid inspector tool useful?
See grid lines and gaps in browser are visible
93
Visually, can you tell the difference between grid lines and gutters ?
Yes
You can even color grid lines to improve visibility
94
What does it mean to position items by grid lines?
You can define the start and end of columns and rows based on the gridline it starts and ends on.
95
What does grid-column-start do?
grid-column-start defines the starting grid line of a column
96
What does grid-column-end define?
The ending grid line for columns.
97
What does grid-row-start do?
It defines the starting grid line for a row
98
What does grid-row-end define?
The ending grid line that defines a row
99
Why would you use a -1 negative grid line?
-1 grid line always stretches full width, regardless of future changes
100
How can negative grid lines be used?
Use them by counting backwards
101
What happens with this negative grid line in the footer?
Footer stretches
Fixed to bottom
102
What's the syntax for grid lines in shorthand?
103
Which value comes first with shorthand grid lines?
first line/ end line
104
Can you position items based on their name?
Yes, with names defined for a grid area you
can specify their position in the grid.
105
What's the CSS property for using named grid template areas?
grid-template-areas
106
With grid template areas, what CSS property do you use?
grid-area
107
Can you give any name to a grid area?
Yes
108
After you label the grid area, how do you use it?
In the CSS, you specify grid-template-areas property, the values correspond with the desired layout.
109
What's the advantage of using grid areas?
You have reusable sections
110
Can you adjust the grid based on screen size?
Yes
111
Can you combine grid adjustments with media queries?
Yes
112
When you see grid items stacked in 1 column, what device is it most suitable for?
Mobile devices
113
What's an ideal pixel value for tablet?
768px
114
Are tablets wide enough to handle 3 columns?
They can be, yes
115
What pixel unit do you use for desktop?
min-width: 992px
116
Can you define the grid for desktop?
Yes
117
Can you use flexbox and grid together?
YES
Flexbox and grid are complementary
Each version has its specialty
118
What dimensions do flexbox and CSS grid follow?
Grid: two dimensional
Flexbox: one dimensional
119
How do you create empty grid cells inside grid-template-areas strings?
use a period .
120
Children of a grid container can be both grid items and flex containers?
False. Grid items cannot define a flex formatting context.
121
Which properties let you use a grid line
numbers to control how items are placed on the grid?
grid-row and grid-column
122
The grid area name must match the selector name
True or false
**False.**
You can name a grid area anything you want
123
Which tool displays visual representation of your grid to help you inspect grid tracks, grid lines, and gutters?
Firefox grid inspector
124
If you want an aside column to always run next to the footer, how would you specify it?
Using a -1 negative grid line value
125
