CSS Grid is a very powerful tool for rendering web layouts. Prior to CSS Grid, we used tables to create website layouts, then we progressed to Flexbox and then CSS Grid. Like tables and Flex-box, CSS Grid allows us to align items in rows and columns. However, designing complex web layouts is now made possible with CSS Grid. Unlike tables, CSS Grid makes it easy to create web pages without having to use “floats” and “positioning”. In this tutorial, I will take you through the steps I took building the landing page of this sample website. Upon reading through this tutorial, I am confident that you will able to build the remaining pages of the website, feel free to experiment, use whatever layouts you feel most comfortable with. I would love to see your awesome designs if you will share it to me on Twitter. Let’s go!!!
Web Page Layout
My web page was structured this way. In my “head” tag, my external CSS was linked as seen below:
<head>
<title>CSS Grid</title>
<link rel="stylesheet" href="grid.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
My “body” tag was further divided into sections. The example below is my “nav” tag with my “navigation bar” showing four other pages. See snippet below:
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Order Now</a></li>
</ul>
</nav>
After my nav bar, there is another section with class name “top-container”.
<section class="top-container">
<header class="showcase">
<h1>Welcome to Neenarh's kitchen</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, ipsam! Nihil quo minima nulla atque!</p>
<a href="#" class="btn">Read More</a>
</header>
</section>
Following the top-container is another section with class name “boxes”.
<section class="boxes">
<div class="box">
<i class="fas fa-utensils fa-4x"></i>
<h3>Making a booking</h3>
<p><span>Date :</span> 07/07/2019</p>
<p><span>Time : </span>10: AM</p>
</div>
<div class="box">
<i class="fas fa-clock fa-4x"></i>
<h3>Opening times</h3>
<p>Bar : open till dawn</p>
<p>Mon - Sat : 08.AM - 22.PM</p>
</div>
<div class="box">
<i class="fas fa-address-card fa-4x"></i>
<h3>Contact</h3>
<p>Address : Abuja, Nigeria</p>
<p>Phone: +234 78*****</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<h3>Social media</h3>
<p>Follow us on all platforms</p>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fab fa-facebook fa-2x"></i>
</div>
</section>
And then the last two sections: “info” and “portfolio”.
<section class="info">
<img src="beer-beverage.jpg" alt="">
<div>
<h2>Awesome Deals</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias reiciendis deleniti possimus nemo non repellendus?
Quae atque vero modi quidem! Autem cupiditate fugit doloribus ad amet, asperiores provident commodi.</p> <br>
<a href="#" class="btn">Lots more</a>
</div>
</section>
<!-- Portfolio -->
<section class="portfolio">
<img src="basil-fresh.jpg" alt="">
<img src="barbecue.jpg" alt="">
<img src="basil-fresh.jpg" alt="">
<img src="beer-beverage.jpg" alt="">
<img src="barbecue.jpg" alt="">
</section><br>
Finally, the “footer”.
<!-- Footer -->
<footer>
<p>CSS grid © 2019</p>
</footer>
</div>
<!-- Wrapper Ends -->
My CSS Styling
/* CSS Variables */
:root {
--primary: #ddd;
--darker: #333;
--lighter: #fff;
--shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}
html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: var(--darker);
}
body {
background: #fff;
margin: 30px 50px;
line-height: 1.4;
}
I created variables to help me hold down colors that I used throughout my web page, and then the “box-sizing” to remove all default “width” and “height” properties in my HTML.
.btn {
background: var(--darker);
color: var(--lighter);
padding: 0.6rem 1.3rem;
text-decoration: none;
border-radius: 15px;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 20px;
}
/* Navigation */
.main-nav ul {
display: grid;
grid-gap: 20px;
padding: 0;
list-style: none;
grid-template-columns: repeat(4, 1fr);
}
.main-nav a {
background: var(--primary);
display: block;
text-decoration: none;
padding: 0.8rem;
text-align: center;
color: var(--dark);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--darker);
color: var(--lighter);
}
The code snippet above is the styling applied to my navigation bar, see how I activated the “grid” with this lines of code below:
.wrapper {
display: grid;
grid-gap: 20px;
}
By simply setting the wrapper class to “display: grid”, it activates the grid system, and “grid-gap: 20px;” sets the space between the columns and rows.
.showcase {
min-height: 400px;
background: url(barbecue.jpg);
background-size: cover;
background-position: center;
padding: 3rem;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0;
color: var(--lighter);
}
.showcase p,h1 {
font-size: 1.3rem;
margin-top: 0;
color: var(--lighter);
font-family: cursive;
}
In the snippet above, gave a minimum “height”, and a “background” image for my “header” and applied other styling as seen above.
/* Boxes */
.boxes {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
The “.boxes class” was set to grid by displaying it to “grid”, then a “grid-gap” between the boxes was set to 20px.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
The “repeat()” function allows me to repeat columns as much as needed, “minmax” width of 200px for each boxes, the 1fr tells the browser to distribute the space between the columns so that each column equally gets one fraction of that space. That is, they’re all fluid, equal-width columns. The auto-fit tells the browser to handle column sizing and element wrapping so that the elements will wrap into rows when the width is not large enough to fit them in without any overflow.
/* Info */
.info {
background: var(--primary);
box-shadow: var(--shadow);
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(2, 1fr);
padding: 3rem;
}
/* Portfolio */
.portfolio {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.portfolio img {
width: 100%;
box-shadow: var(--shadow);
}
/* Footer */
footer {
margin-top: 2rem;
background: var(--darker);
color: var(--lighter);
text-align: center;
padding: 1rem;
}
Notice how I am using the CSS variables and box shadow initially declared from the start in my CSS file.
/* Media Queries */
@media (max-width: 700px) {
.showcase h1 {
font-size: 2.5rem;
}
.main-nav ul {
grid-template-columns: 1fr;
}
.info {
grid-template-columns: 1fr;
}
.info .btn {
display: block;
text-align: center;
margin: auto;
}
}
And finally, the media query applied will enable the element stack on top of each other when viewed on smaller screens otherwise they turn out being squished and not responsive.
Output
Conclusion
I hope you have learnt something on CSS Grid on reading this tutorial. Here is a more in depth tutorial on CSS Grid. As a suggested assignment, why not try building the other pages of this website? Tweak this current design, make it more beautiful and responsive. I would love to see your lovely designs if you don’t mind sharing with me on Twitter. Keep learning!!!
