Waffle Grid Is Easy to Use and Lightweight Grid System

Waffle Grid Is Easy to Use and Lightweight Grid System

Are you looking for an easy to use, responsive and lightweight grid system to design your next project? You can try Waffle. There could be various reasons why should you try a new lightweight CSS grid system in place of your existing heavy CSS framework.

The Waffle Grid system is a lightweight CSS grid system that comes in the only 7kb minified CSS file. The grid system offers responsive and easy to customize grid to suit your needs.

Waffle Grid

By default, it has two breakpoints at 840px for medium devices and 480px for small devices. If you need more, you can add more. The waffle grid system was written in sass.

How to Use Waffle Grid System

Download the CSS file and include in the web page where you want to use it. Now remember these points.

  • use the .grid class for defining the grid
  • use the .row class for defining a row
  • use the .col class for defining a column
  • use a .col-n-of-p class to define the width, where n-of-p defines how wide the column should be


<div class="grid">
  <div class="row">
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-8"></div>
    <div class="col col-3-of-8"></div>
    <div class="col col-1-of-4"></div>

Read More

Tags: | |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

Similar Articles


Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker