Layout

Reading

Flexbox and Grid

Formatting the header

We notice that we'd like the list items in the header to be horizontally aligned.

We can use flexbox to apply this.

First, we will add this CSS to the parent as flexbox is always applied to the parent of the elements we want to flex.


header ul {
  display: flex;
}

This will place all the list items on the same visual row. However, we want the elements to be aligned in the center, so we revise this CSS:


header ul {
  display: flex;
  justify-content: center;
}

Finally, we can add some visual interest by adding some letter-spacing with this revision:


header ul {
  display: flex;
  justify-content: center;
  letter-spacing: 0.02rem;
}

Now all our items are jammed against each other. Let's put some space between them:


header li {
  margin-left: 1rem;
}

This is great, but we see that the elements are not in the center. Because we have left margin on the very first item, we are beginning 1rem of space from the center.

To solve this we could put a class on this item and remove the margin. However, we can strive to avoid adding specific classes when existing CSS techniques can help.

To address all the elements except the first element, we can use a pseudo-selector.


header li:not(:first-child) {
  margin-left: 1rem;
}

Here we apply two selectors, the first being not and then :first-child. In this way, we are indicating that we want this margin-left on all the li elements within the header that are NOT the first child. So, in this case, it is the elements, for "Our animals", "Blog", and "About" but NOT the element "Home"

Another way to represent this is with an adjacency selector.


header li + li {
  margin-left: 1rem;
}

In this solution, we apply this margin to any li that is immediately preceded by another li. This would be true for all the elements but the very first one which is not preceded by any element.

Both of these serve to format our list.

Let's put the h1 in the center. Since this is a single element and is a text element, we can style it as such:


header h1 {
  text-align: center;
}

Formatting the gallery of images

We'd like to format the gallery of images of "Our New Friends" in a nice grid. To do so, we will identify the ul by changing:


<ul>
  <li>
    <img src="http://placekitten.com/320/240" alt="An Animal" />
  </li>
  <li>
    <img src="http://placekitten.com/320/240" alt="An Animal" />
  </li>
  <li>
    <img src="http://placekitten.com/320/240" alt="An Animal" />
  </li>
  <li>
    <img src="http://placekitten.com/320/240" alt="An Animal" />
  </li>
</ul>

into:


<ul class="gallery">
  <li>
    <img src="http://placekitten.com/320/240" alt="An Animal" />
  </li>
  <li>
    <img src="http://placekitten.com/320/240" alt="An Animal" />
  </li>
  <li>
    <img src="http://placekitten.com/320/240" alt="An Animal" />
  </li>
  <li>
    <img src="http://placekitten.com/320/240" alt="An Animal" />
  </li>
</ul>

and then applying some grid styling:


/* Sets up a two column grid */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
/* Make the image's 100% the size of their parent */
.gallery img {
  width: 100%;
}

Conclusion