CSS Grid Float

Hi everyone,

Right now i want to share something great about CSS code. Before we go into the topic, did you ever think to modify your site to have a grid design?

download (1)

Grid design inspiration

Yes, grid design is looked like image above. If the box height is the same, i’m pretty sure if there will be no problem. But, the problem is coming when you have a different box height. The grid will be broken such as the image below:

UntitledYes, so many people are trying hard to make if have a perfect grid but with no luck. The other have a technique to use a JQuery to fix it and it is working fine. But, the question now is: for you who don’t know about JavaScript or JQuery programming language, how to achieve it?

At this post i want to share something great to achieve a grid layout just by using CSS code. You can use this code:

li.post-float-wrapper {
display: block; 
display: inline-block; 
border:1px solid transparent;
vertical-align:top; 
width: 43%; 
padding: 10px 15px; 
margin: 0px 15px 20px 15px; 
background: #fff;
}

And your grid is working fine!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s