In this article, I explain how to level up your CSS skills using CSS grid layouts practical features.

When it comes to learning a new skill for web design, it can be difficult.  Therefore, I’m going to break down using fractions, rows, columns and how I achieved the layout what I’m currently using.

Rather than use lines to determine the position of the columns and rows, I’m going to mix in some fractions and pixels.  The one thing I love when using CSS grid layouts practical features, is the flexibility of interchanging pixels, ems and percentages.  At first when I was designing this layout, I wanted to expand the sections as I add more content to the middle areas, so I found that pixels work quite well.

There’s also the mobile first version as you can see in the beginning.  At the end of the code, there’s also the desktop version.  Today, utilizing the mobile first approach is not only popular, but very useful for design today.  Almost all our mobile devices are used to buy things and look at all day long.

Shocking statistics on mobile phones

 

 

Using CSS grid layout practical features is EASY

Using fr – Fractions in your layouts

Benefits of ‘fr’ fractions:

  • Using ‘fr’  is a cleaner way of creating a grid.
  • Easy to maintain code
  • Simple way to create columns and rows

 

Syntax:

Goes something like this…

.grid-template-columns: 1fr 1fr 1fr;

 

Example:

Here’s a practical example to use in your own projects if you choose.  Keep in mind this is a very small grid designed to fit inside the screen of Codepen because of the huge margin I created around the grid.  Small but very useful.  ‘Fr’ is awesome when you don’t want to figure out the measurements and be lazy for a while.  But you can also mix in percentages and pixels when you create columns while using CSS grid practical features.  Bingo!

Below is the entire CSS grid layout code.

CSS grid layout practical features is FUN!

HTML and CSS grid example

CSS grid layout features

CSS grid layout features

 

CSS grid layout features 2

 

You can also make something cool like a content grid.  This is a grid by Tobias Gerlach that I discovered on Codepen.io.  Go check it out!

CSS grid layouts practical features by other web developers.

Content Grid by Tobias Gerlach on Codepen.io

 

content grid system by Tobias Gerlach

 

CSS grid layouts practical features – Using Overlap

 

When I saw this technique used on another web developers website, I couldn’t wait to use it in my personal projects.  So I created a portfolio site that does CSS overlap, which is not used quite often.  It can be done without an absolute positioning, which is a bit tricky to use in your code.  But I used the trick that I saw one day.

Anyways here’s the layout and the CSS code along with the HTML.

 

CSS overlap

 

The easiest way to overlap boxes is to use a list and CSS grid and to use a span.  The absolute z-index is a bit tricky, so try it this way.

 

 

 

 

 

 

CSS grid portfolio overlap trick

In this I used some filters in the image and in the social links and special links in the paragraph.  You can overlap just about anything not just images, but content too.

Are you bored?  Then you might like this other article:  The Single most effective way to master CSS grid

 

 

grid layout portfolio CSS

 

It’s kind of like what you see in the magazines. CSS grid layouts practical features are adorable to use in all your projects.  Now your website can look like a magazine, which is why I think CSS is so amazing to use.  It’s truly an exciting time to live.

 

magazine layout

 

This is all I have now as far as CSS grid layouts practical features.  I’ll continue to add more CSS grid layouts as I do more projects, but if you come across something awesome definitely let me know.

Send me your design by contacting me or just say HELLO!  I like people.  Lets have a conversation.  Lets inspire one another and be happy and marry and jolly and all that good stuff.

 

Some Good reads:   How to build a contact form using PHP and HTML5 from scratch?