CSS Grid Layout Flashcards
What’s the CSS grid?
The CSS grid is a two dimensional layout system
that lets you specify both columns and rows.
Is flexbox 2 dimensional CSS?
No, flexbox is 1 dimensional.
It can only do either a row or columns.
Is CSS grid an improvement over past methods?
Yes.
Floats, tables, and other CSS methods could easily break.
What is a grid container?
Grid containers establish formatting context for CSS items.
How does the CSS grid container control the grid items?
Name 3 ways
Grid containers control size, spacing, and alignment of grid items.
What is a grid item?
It’s a chunk of content that belongs to a grid container.
What are 4 examples of content that can be a grid item?
Header
Nav
Aside
Main
Footers
And their content
What direction to grid lines appear in?
Horizontal and vertical grid lines are possible
What number system do grid lines follow?
Start at 1 and increase in proportion to # of items
Apply to both columns and rows
Why are grid lines useful?
Grid lines help define columns and rows, by defining
their starting lines and end lines.
CSS Grid is a ______ layout system.
Two-dimensional layout system
Grid layout does not work together with flexbox.
True or False
False. Grid and flexbox are complementary layout
tools and have their specialties.
The _______ establishes the grid formatting context and manages how its direct child elements are spaced, sized, and aligned.
Grid Container
The direct children of a grid container are called _______.
Grid items
What divides the grid container’s space into columns and rows?
Grid lines
In the following code, the div with the class grid is the grid container. Which elements are the grid items?
See image
What are grid tracks?
Space between two grid lines that define columns and rows of grid
What do grid template columns control?
- Set column tracks
- Number of values
- Space of column
- Establishes size of columns
What do grid template rows do?
- Set row tracks
- Number of rows
- Height of row
- Establishes size of rows
How do you separate values for columns and rows?
Spaces
No commas
What does this communicate about the columns type?
3 columns
200 px each
What measurements can you use to define widths
of columns and heights of rows?
Pixels
Percentages
EM
REM
What does the auto value do?
adjusts size to fill available space
leaves no gaps around edges
auto is flexible, adjusting automatically to fill up space
What does the auto value do in the column context?
What is an implicit row/column?
It’s a section of context not explicitly defined in size.
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
What does grid-template-rows create?
Rows
What does grid-template-columns create?
columns
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
What do grid gaps do?
They add space between columns and rows.
What’s the CSS property to add column gaps?
grid-column-gap
What CSS property do you use to add space between rows?
grid-row-gap
How do you write grid gap shorthand?
In grid gap shorthand, which comes first row or column?
Row first value
Column second value
What happens if you set only 1 value?
grid-gap: 15px;
Sets value for both columns and rows
How many grid lines do you need at the minimum?
Columns/rows need 2 lines
The first step to using grid is defining a grid container.
Target .container and make it a grid container
What’s the first step to enable or create a CSS grid?
display:grid;
Next declare three row tracks in a grid container
Set the first row track to 200px
Second to 300px
Third to 100px
Set the 3 column tracks in this order: 200px 400px 200px
Apply a 20px gutter to rows and columns
What is fr stand for?
Fraction unit
Why is fr useful?
Responsive design
Work in different browser sizes
What does fr do?
Expand and contract based on free space in grid
Does fr do calculations?
What does 1fr represent?
It represents 1 fraction of available space
Why use fr?
It simplifies measurements by doing the math for you.
What’s the math of this code snippet?
1000px max
-200px fixed 3 column
1 fr for column 2
1 fr for column 1
With percentages, what number does it need to add up to?
100%
Are these column values equal or different?
Equal in fr and percentages
What does the 2fr do compared to 1fr?
2fr takes up twice as much space as 1fr
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
Does every column need a value?
Even with 4 columns, every column gets a value
What is the repeat() notation?
It communicates duplicates in a succinct way.
What does the repeat notation convey in this code snippet?
3
1fr
Why use repeat() notation?
To avoid repeating yourself
To communicate more clearly what you want & how many times
How would you rewrite this code snippet with repeat notation?
Do you need commas between row or column values?
No just spaces
What does minmax() do?
It establishes minimum and maximum size to
get sizing rules just right
What does this code snippet on minmax communicate?
min: 200px doesn’t get smaller/narrower
max: 300px doesn’t get larger/wider
How many columns defined in this code snippet?
3 columns defined here
- minmax(200px, 300px)
- 1fr
- 1fr
How does minmax math work in this context?
Max is total - (minmax) = left over (divided by 2, 1fr to use full space
Can you combine repeat with minmax?
Yes
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
What does auto-fill do?
Let’s the browser decide how many to fit into container, without overflowing, with gaps into account of measurement
Does auto-fill generate empty columns?
What does this do to divide the column space?
Minimum of 60 px
Divide remaining space by 1fr
What does auto-fit do?
Remove fixed column number, replace with auto-fit
Automatically resizes columns based on browser size
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
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.
What is explicit grid?
what you define,
of rows, #of columns
What is implicit grid?
dynamically generated
varies size
What’s the advantage of using implicit grid rules?
ideal for uncertainty
positions extra items outside of grid
determine placement and size–
What triggers implicit grid?
More items than accounted for
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.
What determines the height of implicit grids?
Implicit tracks auto sized by default
Height is as tall as content
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
What CSS properties setup implicit rows and columns?
grid-auto-rows: implicit row tracks
grid-auto-columns: implicit column track
What happens with this implicit row?
All rows are at least 250px
Creates implicit rows based off of grid-auto-rows
What does this combination of minmax and auto rows do?
Establishes a minimum size of 150px
Grows up to space available via auto
What does grid auto flow do?
auto flow specifies rows or columns for implicit grid rules
What’s the default value of grid-auto-flow?
row
If you need auto flow for columns what do you specify?
grid-auto-flow: column;
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
Given the following declaration:
grid-template-columns: 1fr 1fr 1fr 1fr;
How can you rewrite the track listing?
grid-template-columns: repeat(4, 1fr);
Which CSS unit represents a fraction of the
available space inside the grid container?
fr
Which of the following will generate as many tracks as necessary to fit the available space, without causing the grid to overflow?
auto-fit
Which property controls the size of implicit column tracks?
grid-auto-columns
The grid you define with grid-template-rows
and grid-template-columns is called
the explicit grid
What tool does firefox provide to inspect the grid online?
Firefox Grid Inspector Tool
What does the waffle icon do to the grid?
Why is the firefox grid inspector tool useful?
See grid lines and gaps in browser are visible
Visually, can you tell the difference between grid lines and gutters ?
Yes
You can even color grid lines to improve visibility
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.
What does grid-column-start do?
grid-column-start defines the starting grid line of a column
What does grid-column-end define?
The ending grid line for columns.
What does grid-row-start do?
It defines the starting grid line for a row
What does grid-row-end define?
The ending grid line that defines a row
Why would you use a -1 negative grid line?
-1 grid line always stretches full width, regardless of future changes
How can negative grid lines be used?
Use them by counting backwards
What happens with this negative grid line in the footer?
Footer stretches
Fixed to bottom
What’s the syntax for grid lines in shorthand?
Which value comes first with shorthand grid lines?
first line/ end line
Can you position items based on their name?
Yes, with names defined for a grid area you
can specify their position in the grid.
What’s the CSS property for using named grid template areas?
grid-template-areas
With grid template areas, what CSS property do you use?
grid-area
Can you give any name to a grid area?
Yes
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.
What’s the advantage of using grid areas?
You have reusable sections
Can you adjust the grid based on screen size?
Yes
Can you combine grid adjustments with media queries?
Yes
When you see grid items stacked in 1 column, what device is it most suitable for?
Mobile devices
What’s an ideal pixel value for tablet?
768px
Are tablets wide enough to handle 3 columns?
They can be, yes
What pixel unit do you use for desktop?
min-width: 992px
Can you define the grid for desktop?
Yes
Can you use flexbox and grid together?
YES
Flexbox and grid are complementary
Each version has its specialty
What dimensions do flexbox and CSS grid follow?
Grid: two dimensional
Flexbox: one dimensional
How do you create empty grid cells inside grid-template-areas strings?
use a period .
Children of a grid container can be both grid items and flex containers?
False. Grid items cannot define a flex formatting context.
Which properties let you use a grid line
numbers to control how items are placed on the grid?
grid-row and grid-column
The grid area name must match the selector name
True or false
False.
You can name a grid area anything you want
Which tool displays visual representation of your grid to help you inspect grid tracks, grid lines, and gutters?
Firefox grid inspector
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
