Placing Content within the Grid.

The focus of this lesson is to place and align content within grids.

Let’s get started.

1. Placing Content Within the Sidebar

This looks like the easiest to start with. Let’s go for it.

The sidebar consists of 8 icons equally spaced out vertically across the entire length of the sidebar.

Insert the icons, like this:

<div class="aside">
      <i class="fa fa-bars"></i>
      <i class="fa fa-home"></i>
      <i class="fa fa-search"></i>
      <i class="fa fa-volume-up"></i>
      <i class="fa fa-user"></i>
      <i class="fa fa-spotify"></i>
      <i class="fa fa-cog"></i>
      <i class="fa fa-soundcloud"></i>
</div>

Below is the result of that:

Also, hide the icons when on mobile. Show them when the app is visited on a larger screen. This is the mobile first approach.

.aside i {
  display: none;
}

@media only screen and (min-width:600px) {
  .aside i {
    display: block;
  }
}

The icons are displayed, but poorly aligned.

Aligning the icons

The i tags are inline elements — which explains why every 2 icons sit on one line.

Let’s fix the arrangement.

Grid items can be grids themselves. Why not

Step 1: Make the Sidebar a Grid Container

This will give access to using the grid’s alignment features.

Since the sidebar is only seen on larger screens, do not forget to wrap this in the media query.

@media only screen and (min-width:600px) {

  .aside {
     display: grid; 
  }
  
  .aside i {
    border: 1px solid

...