[Updated] How to Easily master CSS grid for Web Developers

by Roxanne Reyes Founder of Wae Tech Solutions

 

Today developing a responsive website is required to be viewed on your mobile phone. Gone are the days of old when websites were only viewed on desktops.

Why is it so important?

It’s important because 80% of Google searches are made everyday, which is about 5 billion Google searches everyday worldwide.

This number is really astonishing when you think about it.

I couldn’t believe the amount of searches and the shift of the internet that has gone mobile.

I can remember a long time ago when a mobile phone was only used to call someone. However, now a cell phone is used for a variety of things, such as watching videos on YouTube, listening to music with Spotify and playing a game with your favorite app.

Now as web developers we get to create something meaningful for users. Learning to code has been the best skill I could every know because bringing something to life has never been too limiting.

Actually it has broaden my horizons more because many companies look for talented developers every single day. So if you’re a developer don’t give up.

Keep going, keep learning, and keep creating. You might surprise yourself in the end.

How would you like to master CSS grid easily with some simple steps?

What if I told you there’s a better way to master CSS grid?  Would you like to know?

I actually saw a few tricks that made me understand how to master CSS grid.  Therefore, when I saw this web developer showing lots of people how to do it, everything made perfect sense to me.  If you’re a huge fan of YouTube, I watched mmtuts CSS grid layouts and it was mind boggling to me.  My brain started to do the happy dance.  Now CSS grid wasn’t so confusing after all. Yay!

What I’m about to show you is just a layout with minimal use of code.

It’s nothing pretty, but it’s very simple to master the CSS grid.  I know there’s several ways of displaying a basic website layout, but I thought I would share something that didn’t need all those floats and media queries all over the place.

When designing for a mobile concept, he showed an even easier way to do it so you can use it your project.

I can’t wait to use it in my projects for future use.

 

Below is an example of a simple layout to master CSS grid

master CSS grid

I know this is plain, but it’s a layout that is customizable and can adapt to the container in the grid.  I’ve got the code that explains what I exactly mean.

 

First of all, I am using Visual Studio Code text editor with Emmet.  Emmet is a plugin or extension in Visual Studio Code that uses html short cuts to create elements on the page.

Here’s a brief example below to master CSS grid

1. To create a html boilerplate, press ! and tab to start.

 

master CSS grid

 

It should look like this.  HTML boilerplate (master CSS grid! )

 

CSS grid boilerplate

 

2. Next, fill in the following divs with a title, header, Sidebar, content and footer.

Fill in 2 paragraph tags in the content area.  Add the appropriate classes of title, header, sidebar, content and footer.

<p> A </p>

<p> B </p>

 

CSS grid divs

 

 

3. Third, create a css file called style.css

Link CSS in the head above the title

<link rel=”stylesheet” href=”style.css”>

 

master CSS grid stylesheet file

 

 

4.Next, start on CSS stylesheet.

Don’t forget to clear the margin and padding.  See example below.

 

 

 

5. Start with the grid selector below display grid.

You can establish the grid container by these values:

  • display: grid
  • grid-template-columns: 1fr 1fr;
  • grid-template-rows: 1fr 1fr 1fr 1fr;  (fr stands for fraction in CSS to create even rows or column)
  • grid-template-areas:
  • “. title title .” (. ) See explanation below
  •  ” header header” (By calling title, header, sidebar, content and footer twice, it will display in both columns if that makes any sense.)
  • “sidebar sidebar”
  • “content content”
    • okay the . is for allows white space on the side of the container.  This is the coolest thing ever!!!   😎

master css grid

 

The top portion is the Mobile version above, which is the mobile first approach.  The only version is left to create is the desktop, which is shown below in the media query.  As you can see this is very easy.  To master CSS grid, you only need a few lines of code with no ugly floats.

As you can see below the mobile view is 320px.  You can specify the length or I should say amount of pixels between the columns

For example it can be written like this:

CSS grid320pxstylesheet

CSS grid 320px

 

See result in action

 

master CSS grid

Lets continue building the layout to master CSS grid

 

CSS grid styles

 

6.Last, create the desktop version set at 500 px on each column.  See example below

Note: the dot . is to indicate a white space on either side of the columns.

 

CSS grid

 

Did you enjoy this tutorial?  Do you feel like you can master CSS grid now?

Comment below.  I would like to hear from you.

 

Read other articles

Build a stunning landing page in 60 minutes

The most powerful and effective way to create a responsive email template using HTML and CSS