Creating HTML Grid Layouts With LESS

This tutorial will discuss How to Create a Simple Grid Layout Using LESS, basically LESS is a very dynamic css extension, commonly called a css preprocessor, LESS can also create variables, mixins, operations and functions as well as other extensions such as Sass. The advantages of LESS compared to Sass, in LESS we only need to use less.js which is inserted on the website page, and while Sass must first install it on the computer.

Image By: Ollesvensson

Creating a Grid in LESS:
First we have to download less.js at
Second we create an htdocs or www folder example:GridLess
Moving the less.js file that we have downloaded, move to the GridLess folder.
Create a grid.less file in the GridLess folder.
We open the grid.less file and its contents are as follows:
First: We Create Variables

[css]/create variables/

Second, make a clearfix mix, we can see on this website

[css]/create a clearfix function/
*zoom: 1;
content: ” “;
display: table;
clear: both;

Third we set the box-sizing

Read more about box-sizing here

/* create box size */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
Fourth: Create container and row:

/Create Container and Row/
.clearfix();/Call the clearfix function/
margin-right: auto;
margin-left: auto;
.row {
.clearfix();/Call the clearfix function/
margin-left: -10px;
margin-right: -10px;
Fifth: Creating Columns