One% CSS Grid

12 Columns Fluid CSS Grid System

What is One% CSS Grid ?

One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly. One% CSS Grid will do all this for you.

One% CSS Grid is a percentage based grid system, it means that it will perfectly adapt to all screen resolutions (mobile, tablets and big screens).

One% CSS Grid has 2 starting options, one which fits 1280px screens (in full screen view) and another one which fits 1024px screens (in full screen view).

For better understanding of how it works and looks please have a look at grid page 1200 or grid page 1000.

Get One% CSS Grid

By downloading the following package you will get main One% CSS Grid css file and 2 types of grid pages (1200, 1000).

Download

Why One% ? Let’s count ...

we have 12 columns

(magic number divided by 2, 3, 4, 6)

for 12 columns we need 11 margins

so if we count margin 3%, then 3% * 11 margins = 33%

and if we count width of 1 column 5.5%, than

5.5% * 12 columns = 66%

in the end we have 33% + 66% = 99% aaand ???

1% is still here so that's the name - One%

2 starting options ? Let’s count a bit more ...

1200px - perfectly fits 1280 screens

12 columns

margin 3% / 36px (full-width)

col1 5.5% / 66px (full-width)

1000px - perfectly fits 1024 screens

12 columns

margin 3% / 30px (full-width)

col1 5.5% / 55px (full-width)

Browser and platform support ?

One% CSS Grid uses, apart from standard CSS2 definitions, only CSS3 Media Queries, which are well-supported in modern browsers.

It’s been tested on Chrome, Opera, Safari, Internet Explorer 9+* and platforms PC, MAC, Android, Apple (iPad, iPhone), even Amazon Kindle.

* It works without problems even on IE7 and IE8 but they don’t support CSS3 Media Queries so it’s necessary to use JavaScript to push them to work with it.

What about images and videos ?

For correct images scaling it’s not necessary to set their height, only width.

If they are bigger than column surrounding them, they will resize automatically according to column width.

Currently, auto-resizing of videos is not supported. It’s necessary to use JavaScript for proper resizing.

Even Photoshop support ?

For designers there is a Photoshop action file with 2 actions. One for 1200px width grid and another one for 1000px width grid.

Or just simply download PSD templates if you are not friend with Photoshop actions ;)

Code explanation

.onepcssgrid-1200 / .onepcssgrid-1000
Main wrapper for whole page, it can be 1200px or 1000px width. It is centered horizontally by default but you can change it in the main onepcssgrid.css file.

.onerow
Basically clearing wrapper for each separate row.

.col1 - .col12
Columns classes which goes from col1 to col12. They can be combined within .onerow up to 12.

.last
It has to be added to the last column of each row. It’s removing margin-right from last element.

HTML code

<div class="onepcssgrid-1200">

   <div class="onerow">
      <div class="col3">Column 3</div>
      <div class="col3">Column 3</div>
      <div class="col3">Column 3</div>
      <div class="col3 last">Column 3</div>
   </div>

   <div class="onerow">
      <div class="col2">Column 2</div>
      <div class="col8">Column 8</div>
      <div class="col2 last">Column 2</div>
   </div>

</div>

Please notice !!!

" The CSS specification does not require a certain level of precision for floating point numbers. " - It means that One% CSS Grid, as percentage based grid system, may not be pixel-perfect in each browser.