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
