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).
By downloading the following package you will get main One% CSS Grid css file and 2 types of grid pages (1200, 1000).Download
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%
1200px - perfectly fits 1280 screens
margin 3% / 36px (full-width)
col1 5.5% / 66px (full-width)
1000px - perfectly fits 1024 screens
margin 3% / 30px (full-width)
col1 5.5% / 55px (full-width)
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.
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.
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 ;)
.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.
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.
It has to be added to the last column of each row. It’s removing margin-right from last element.
<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>
" 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.