Intermediate CSS (continued)
Recap
- What is the "box model"?
- What is a pseudo class?
- What is CSS specificity?
Layout
- Flexbox
- Grid
Block elements
Flex
.parent {
display: flex;
/* tells element to display all
children elements as flex items */
}
Flex
Grid
.parent {
display: grid;
/* tells element to display all
children elements as grid items */
grid-template-columns: 1fr 1fr;
/* fr is a new css unit, but this
defines the vertical separations */
grid-template-rows: 1fr 1fr;
/* this defines the horizontal separations */
}
Grid
