Work in progress

Learn Layout

Flexbox

Single column or row


      .flex {
        align-items: center;
        display: flex;
        justify-content: center;
      }

Grid

Multiple columns and rows


      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        place-items: center;
      }

Want to learn more?

We recommend taking Kevin Powell's 21-Day Challenge: Conquering Responsive Layouts