WDD 130: Web Fundamentals

W04 Learning Activities: Using CSS Layouts

Overview

Mastering CSS Flex and Grid can be challenging. This activity highlights some of the most relevant layouts and the principles behind them.

Prepare

When do I use CSS Flex versus CSS Grid?

Depending on the desired layout, you can often make either method work. You can even use them together, such as using flex to align items within a grid item.

Choose Flex
Choose Grid

Common Layout Methods

Activity Instructions

  1. In the week04 folder, open the file named layout-exercises.html.
  2. Use Live/Five Server to open the file in the browser.
  3. Complete the three exercises. The following images are screenshots of the solutions:
    Layout Exercise 1 Output
    Layout Exercise 2 Output
    Layout Exercise 3 Output
Check Your Understanding

Attempt to complete the exercises on your own before looking at this example solution.

  1. .flex {
      background-color: #aba;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .grid {
      background-color: #abb;
      display: grid;
      place-items: center;
    }

    * Either place-items or align-items/justify-content can be used to for exercise.

  2. .container2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
  3. .container3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;  /* or grid-template-columns: repeat(3, 1fr); */
    }
                  
    .columns-3 {
      grid-column: 1/4; /* or grid-column: span 3; */
    }

There is also a solution file is named layout-exercises-solutions.html and the corresponding CSS file is named layout-exercises-solutions.css in the week04 folder.