CSS Grid Flashcards
What is CSS grid and what it replaces?
CSS grid is a new way to separate elements. It replaces the float mechanism.
When was it introduced? What about the old browsers?
- Old browsers do not support ~5% of the WWW.
How to make old browsers support our styling?
via feature detection: @supports not (display: grid).
What is the two-step grid process?
First you define a grid, then you position the items.
Where should we define the display: grid css property and value?
Should be defined in the container element (can simply be the body)
How to define the column and row sizes?
grid-template-columns: 15em auto 15em defines a 3 column grid with 4 tracks. To define rows: grid-template-rows
How to define a row to fill as much as possible content?
auto.
How to define a row to fill just the necessary space to the children elements to fit?
min-content
How to make an element span the whole line in a 3 column grid?
grid-column-start:1
grid-column-end: 4 (yes, 4… because it refers to the track)
What did I have to use to remove the vertical scrollbar of the grid-based layout?
margin: 0px and box-sizing: border-box
What is the fr? When is it useful?
fr is a fractional unit. It is useful when you want to divide the space in equal amounts of space (1fr 1fr instead of 50% 50%)
What does the minmax function do when defining a colum size?
defines the minimum and maximum size of the column
what does the fit-content(30em)?
it will fit the whole content in 30em. won’t allow the column size to above 30em even if the content wants more than that.
How to repeat the size 1fr 10 times without having to write it manually? Can it handle more than one size, e.g 1fr 3fr?
By using the function repeat(10, 1fr). just change to repeat(10, 1fr, 3fr)
Can repeat, autofill and minmax replace media queries to create responsive layouts?
Yes. e.g: .cakes {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(auto-fill, min-max(15em, 1fr));
}What is the difference between auto-fill and auto-fit?
Auto-fill can create empty spaces and auto-fit will stretch the components.
What are the shorthands to define grid columns and rows?
grid and grid-template
What does the html properties lang=”he” dir=”rtl” do?
It makes the grid items to flow from the Right to Left.
What the grid flow does to the documents?
it changes how the elements float the documents: useful for localization where the orientation of the items change, eg: hebraic
When the implicit grid is created? How to control it? What is the default?
The implicit grid is created when the grid items does not fit the grid column/row defined. Using grid-auto-rows ( and grid-auto-columns) allows you to handle the size of the implicit added rows (which is default to auto)
What does auto-flow do? how to do create a two-column grid with as many rows as necessary?
it allows defining how implicit and explicit items will be sized… grid: auto-flow 10em / 10em 10em
grid: / COLUMNS
How are spaces in the HTML called? How is it called in the CSS grid?
Gutters and on grid is called gaps.
How gaps are created in css grids?
grid-row-gap, grid-column-gap or just grid-gap to combine both
what does the grid-column-end: -1 does?
The element will stretch until the end of the grid.
