Section 8 Flashcards
What can you use to add numbers 1 - X with emmet?
The dollar sign!
Where will you use fr more? Columns or Rows?
Rows. . .
If you move item 1 in a 6 item grid to position 4 with item 4, where will item 4 go?
It will go where item 1 came from. Since grid uses automatic placement.
What does a -1 represent with grids?
The end!
How does grid naming work with repeat values?
It automatically asigns a number for each next grid line.
How does grid-template-areas work?
what does a period do?
When does is become impractical to use grid-template-areas?
It works by naming each of the cells in the grid, then telling items to occupy the cells you give them the name of.
It creates an empty space.
It is very handy for smaller grid layouts, however larger grids makes this method impractical. . .
What is grid-auto-flow set to by default?
Can you set values to grid-auto?
Row
Yes!
What is align-items set to by default?
Stretch
Within what does align and justify items align the items?
Within the grid area. A grid area of 2 cells along the row axis and 2 cells along the vertical axis, will be be centered inside the whole area they create.
When do we use align and justify self?
When we want to target one particular item.
What is justify and align content and what are the values?
It aligns the entire grid container. The values are start, end, center, space-between and space around
grid-auto-flow has another value you can add next to either row or column, what is it and what does it do?
dense, this value doesn’t need to be separted by a comma. It removes empty space in a grid by filling it up with items that have not had their position defined.
What does max-content do?
It makes the track as wide as it needs to be to fit the widest content.
What does max-content do?
What does min content do?
Does it work with minmax?
It makes the track as wide as it needs to be to fit the widest content.
It makes the cell as big as it needs to be . .
Yes!☻
What is auto-fill?
What is auto-fit?
What is a great trick with auto-fit that allows to make repsponsive web pages?
Auto fill automatically fills in the tracks. It will add as many tracks that the specified width of the track will allow to fit into the container width.
Auto fit is the same as auto fill, except that is will collapse the tracks that are not being used by any grid items.
repeat(auto-fit, minmax(200px, 1fr));
This makes the last item to drop down to a next row when the min width is reached.
