CSS Grid — Responsive Website (Part 2)

Emily Y Leung
May 12 · 4 min read

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Moving onto the menu and features section.

At the moment, the menu buttons come as a list.

<nav class="menu">
<button aria-expanded="false" aria-controls="menu-list">
<span class="open">☰</span>
<span class="close">×</span>
Menu
</button>
<ul id="menu-list">
<li>
<a href="">Tacos</a>
</li>
<li>
<a href="">Beers</a>
</li>
<li>
<a href="">Wines</a>
</li>
<li>
<a href="">Desserts</a>
</li>
<li>
<a href="">Reservations</a>
</li>
</ul>
</nav>

To add some styling:

  • turn the menu into a grid
  • remove the padding
  • remove the margin
  • remove the bullet points so it’s only just text
  • we want the menu buttons to be in their own column, evenly stretched as the window resizes, but also stack if the window is too small (100px) using auto-fit and minmax
.menu ul {
display: grid;
padding: 0;
margin: 0;
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Let’s add some styling to the buttons by:

  • adding a yellow background
  • making the yellow stretch to fill the grid cell
  • removing the link highlighting
  • adding a padding of 10px to extend the yellow around the text
  • centring the text
  • changing the colour of the text to black
  • converting the text to uppercase
  • increasing the font-size to 20px

Going back to the list items to update by:

  • adding a grid-gap of 10px between the buttons
  • adding a margin of 20px on the top and bottom of the buttons
.menu ul {
display: grid;
grid-gap: 10px;
padding: 0;
margin: 20px 0;
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.menu a {
background: var(--yellow);
display: block;
text-decoration: none;
padding: 10px;
text-align: center;
color: var(--black);
text-transform: uppercase;
font-size: 20px;
}

For the moment, we will hide the Menu Button using the aria-controls attribute.

[aria-controls="menu-list"] {
display: none;
}

Later down the track, we’ll use media queries to bring it back through interactivity.

The features section will work similarly to the menu buttons in the way it flows in different responsive states.

<section class="features">
<div class="feature">
<span class="icon">🌮</span>
<h3>Tacos</h3>
<p>Lorem ipsum dolor sit amet consectetur elit</p>
</div>
<div class="feature">
<span class="icon">🍺</span>
<h3>Beer</h3>
<p>Lorem ipsum dolor sit amet consectetur elit</p>
</div>
<div class="feature">
<span class="icon">🍷</span>
<h3>Wine</h3>
<p>Lorem ipsum dolor sit amet consectetur elit</p>
</div>
<div class="feature">
<span class="icon">🎵</span>
<h3>Music</h3>
<p>Lorem ipsum dolor sit amet consectetur elit</p>
</div>
</section>

Currently the features looks like this.

To break them up into their own column:

  • apply CSS grid to the features section
  • using auto-fit and minmax to create responsive columns with a minimum width of 200px
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

For each of the feature items:

  • provide a padding of 10px to give the text some space from the edge of the grid cell
  • add a 1px border of black
  • text-align to the centre of the grid cell
  • add a box-shadow of light grey
  • add a grid-gap of 20px to the features section
.features {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.feature {
padding: 10px;
border: 1px solid black;
text-align: center;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

Some final touches to this section:

  • increase the font-size of the icons to 50px to make them appear like images
  • update the font colour to a grey
.feature .icon {
font-size: 50px;
}
.feature p {
color: rgba(0, 0, 0, 0.5);
}

Uncurated

“something small, every day” — Austin Kleon

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store