Responsive Website using CSS Grid
Tags: webdev, css, html, codenewbie
Published: 2020-12-22 10:50:19

This blog post describes one of the websites I have built using a powerful tool for building responsive websites - [CSS Grid layout](https://www.w3schools.com/css/css_grid.asp). 

I have watched [WesBos tutorial](https://www.youtube.com/watch?v=T-slCsOrLcc&list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG&ab_channel=WesBos) 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
```html
<div class="wrapper">
```
2.  Inside the **wrapper** there is `div` with a class `top` -  this element is responsible for the content on the top of page:  
```html
<div class="top">
```
3.  Inside the **top**  there are `header`, 2 call-to-actions `div` areas to the right of the main image:
```html
<header class="hero">
 <div class="call-to-action call-to-actiont-1">
<div class="call-to-action call-to-actiont-2">
```

4. After **top** there is `nav` element for the menu:
```html
<nav class="menu">
```
5.  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:
```html
<button aria-expanded="false" aria-controls="menu-list">
 <ul id="menu-list">
```

6.  Inside the **wrapper** after **menu** class there are 3 sections:
```html
<section class="features">
 <section class="about">
<section class="gallery">
```

7.  There are 4 `div` elements inside **features** section, they describe Tacos, Beer, Wine and Music:
```html
<div class="feature">
```
8. **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:
```html
.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.

## Desktop Version
![page_1](https://dev-to-uploads.s3.amazonaws.com/i/g2qt99w8ggu8p3yq58b0.png)

![page_2](https://dev-to-uploads.s3.amazonaws.com/i/vb37ukik4hw97q1ak1a7.png)

![page_3](https://dev-to-uploads.s3.amazonaws.com/i/odnogou09whkgqqzr8ud.png)

## Tablet Version

On tablet version **Menu** collapses and only **Menu** button is shown. Also the layout of the page is being changed:
![pic_1](https://dev-to-uploads.s3.amazonaws.com/i/1txe7136lnwykx7qn9dt.png)

This image demonstrates **Menu** section  when a user toggles Menu button:
![page_tablet_openMenu.png](https://dev-to-uploads.s3.amazonaws.com/i/mm1rcn1kh46aci5sbgmh.png)

![page_tablet_1.png](https://dev-to-uploads.s3.amazonaws.com/i/sfmjrqsyqf11q2r7s0bx.png)

![page_tablet_2.png](https://dev-to-uploads.s3.amazonaws.com/i/8vnwotqlncxb17i3kurm.png)

## Mobile Version

![page_mobile.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608633051006/HoeaYc7IF.png)

![page_mobile_1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608633057363/Nw0jUxo8k.png)

![page_mobile_2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608633066123/zZa3ZOTpE.png)

![page_mobile_3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608633076446/mT3cpTaff.png)

Thank you for reading my blog. Feel free to connect on [LinkedIn](https://www.linkedin.com/in/olenadrugalya/) or [Twitter](https://twitter.com/OlenaDrugalya) :)


<a href='https://ko-fi.com/J3J42JOOA' target='_blank'><img height='12' width=30% style='border:0px;height:12px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>