Responsive Website using CSS Grid

Olena Drugalya - Dec 22 '20 - - Dev Community

This blog post describes one of the websites I have built using a powerful tool for building responsive websites - CSS Grid layout.

I have watched WesBos tutorial while I was learning Grid and practiced it afterwards (which is a good way of study for me).

Page Content and Layout

The page content is pretty simple here:

  1. div with a class wrapper - main wrapping layout element
<div class="wrapper">
Enter fullscreen mode Exit fullscreen mode
  1. Inside the wrapper there is div with a class top - this element is responsible for the content on the top of page:
<div class="top">
Enter fullscreen mode Exit fullscreen mode
  1. Inside the top there are header, 2 call-to-actions div areas to the right of the main image:
<header class="hero">
 <div class="call-to-action call-to-actiont-1">
<div class="call-to-action call-to-actiont-2">
Enter fullscreen mode Exit fullscreen mode
  1. After top there is nav element for the menu:
<nav class="menu">
Enter fullscreen mode Exit fullscreen mode
  1. Inside the menu navigation there are button and ul elements. We create button here to be able to toggle it and expand/ collapse the menu. Menu-list element contains links of different dishes in the menu:
<button aria-expanded="false" aria-controls="menu-list">
 <ul id="menu-list">
Enter fullscreen mode Exit fullscreen mode
  1. Inside the wrapper after menu class there are 3 sections:
<section class="features">
 <section class="about">
<section class="gallery">
Enter fullscreen mode Exit fullscreen mode
  1. There are 4 div elements inside features section, they describe Tacos, Beer, Wine and Music:
<div class="feature">
Enter fullscreen mode Exit fullscreen mode
  1. About section contains info about Featured Taco and gallery section contains images.

Every HTML block of code was styled using CSS Grid layout. The most frequently used CSS properties in this project were:

  • display: grid
  • grid-gap
  • grid-template-areas
  • grid-template-columns

For example:

.features {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Enter fullscreen mode Exit fullscreen mode

Website is fully responsive, we use here @media queries to re-arrange the page layout according to width. See pictures below for desktop, tablet and mobile versions.

Desktop Version

page_1

page_2

page_3

Tablet Version

On tablet version Menu collapses and only Menu button is shown. Also the layout of the page is being changed:
pic_1

This image demonstrates Menu section when a user toggles Menu button:
page_tablet_openMenu.png

page_tablet_1.png

page_tablet_2.png

Mobile Version

page_mobile.png

page_mobile_1.png

page_mobile_2.png

page_mobile_3.png

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Buy Me a Coffee at ko-fi.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .