Search⌘ K
Home
Courses
The Complete Advanced Guide to CSS

Placing Content within the Grid

Explore how to place and align content effectively within CSS Grid containers to build responsive and dynamic web layouts. Understand grid alignment properties like justify-items and align-items, and apply mobile-first techniques to adapt content for different screen sizes, including hiding elements and redefining grid areas for larger screens.

We'll cover the following...

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 {
...