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 */
              }
            
          

A Complete Guide to Flexbox

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 */
              }
            
          

A Complete Guide to Grid

Grid