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:
-
divwith a classwrapper- main wrapping layout element
<div class="wrapper">
- Inside the wrapper there is
divwith a classtop- this element is responsible for the content on the top of page:
<div class="top">
- Inside the top there are
header, 2 call-to-actionsdivareas 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">
- After top there is
navelement for the menu:
<nav class="menu">
- Inside the menu navigation there are
buttonandulelements. We createbuttonhere 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">
- Inside the wrapper after menu class there are 3 sections:
<section class="features">
<section class="about">
<section class="gallery">
- There are 4
divelements inside features section, they describe Tacos, Beer, Wine and Music:
<div class="feature">
- 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: gridgrid-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.
Desktop Version
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
Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)
Top comments (6)
Hi, I am also learning CSS Grid, but I come across something annoying on the right hand side of my layout there is an awkward gap that is messing up with my layout. I have search for help but not find yet. Any ideas please in how to solve that problem.
Hi, I need to see the code. Please make a pen on CodePen with the code and share the link
Thanks for the reply, here is my code:
codepen.io/fretagi/pen/qBaPExy
The gap is the rest of your columns :) since you declared that item5 should take a place of column 4, the rest of space is left empty, thats why the gap. You can fix that by writing:
ev2 {
background-color: #ffeead;
grid-column: 4 / 8; - so it starts from column 4 and goes along to column 8
grid-row: 3 / 6;
}
Message me to Twitter if its still not clear :)
Thank you very much :)!!
You are most welcome ;)