Responsive Website using CSS Grid

Responsive Website using CSS Grid:


Tablet Version

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

This image demonstrates Menu section when a user toggles Menu button:

Mobile Version

Page Content and Layout

The page content is pretty simple here:

  1. div with a class wrapper – main wrapping layout element
  1. Inside the wrapper there is div with a class top – this element is responsible for the content on the top of page:
  1. Inside the top there are header, 2 call-to-actions div areas to the right of the main image:
  1. After top there is nav element for the menu:

  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-listelement contains links of different dishes in the menu:

  1. Inside the wrapper after menu class there are 3 sections:
  1. There are 4 div elements inside features section, they describe Tacos, Beer, Wine and Music:
  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));

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.

from Tumblr

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s