Skip to content

erangakapukotuwa/responsive-css-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

responsive-css-grid

This is a simple responsive grid script. You can divide your page into twelve equal parts. The smallest block, class name is one-block. And the next one is two-block. Other names are inclemently changing till the twelve-block. You can use different combination of these blocks to fill each rows as your prefer and the requirement. A screenshot is given bellow.

solarized palette

You will make a good sense after doing the following steps. Try it. It is quite simple. :)

Available class names(Blocks)

<div class="block one-block">
<div class="block two-block">
<div class="block three-block">
<div class="block four-block">
...
...
<div class="block twelve-block">

How to use

Include the responsive-css-grid.css file in the header part of your HTML page.

<link rel="stylesheet" type="text/css" href="parth/to/css-responsive-grid.css"/>

Add the html into the body section.

<div class="wrapper">
	<div class="row">
		<div class="block one-block">Your content ...</div>
		<div class="block one-block">Your content ...</div>
		<div class="block one-block">Your content ...</div>
		......
		.....
		<div class="block one-block">Your content ...</div>
	</div>
</div>

Please make sure that the total of the blocks need to be eaqual to twelve.

Thats all. Let's see the code in discreptive view.

Open a wrapper class first.

<div class="wrapper"></div>

The default max-width(Maximum width) is 1200px. You can change this value or overwrite using css, if you want to change max > width of your site. And next,

Add a row class inside the wrapper

<div class="wrapper">
	<div class="row"></div>
</div>

Now you can add your preferred grid structure in to the row. The total of the blocks needs to be equal to twelve(12).

<div class="wrapper">
	<div class="row">
		<div class="block one-block">Your content ...</div>
		<div class="block one-block">Your content ...</div>
		<div class="block one-block">Your content ...</div>
		......
		.....
		<div class="block one-block">Your content ...</div>
	</div>
</div>

Enjoy it (y)

License

This projected is licensed under the terms of the MIT license

About

This project is an open source project.

Resources

License

Stars

Watchers

Forks

Packages

No packages published