{"id":10166,"date":"2011-09-16T07:03:22","date_gmt":"2011-09-16T11:03:22","guid":{"rendered":"http:\/\/info.template-help.com\/?p=10166"},"modified":"2015-09-18T07:09:50","modified_gmt":"2015-09-18T11:09:50","slug":"css-grid-960-system","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/css-grid-960-system.html","title":{"rendered":"CSS. Grid 960 system"},"content":{"rendered":"

Browsing through the template’s source code and styles you may have seen the classes like : “grid_6<\/strong>”, “grid_8<\/strong>”. These are the classes used by the grid 960 system<\/strong>. Let’s see what this system is and what it can offer. <\/p>\r\n\r\n

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are several variants of the layout. The most often used are 12 columns, 16 columns and 24 columns grids. <\/p>\r\n\r\n\r\n\"\"<\/a>\r\n Below you can see the example of 24 columns grid used for the template:<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

As you can see the layout blocks fit the grid columns. Using the available classes you can easily change the website layout according to your needs. <\/p>\r\n\r\n

Usage<\/h3>\r\n\r\n

Each template where the grid system has been used contains the grid.css file where you can see the specific classes used. Let’s see how the grid system can be used. <\/p>\r\n\r\n

Open the grid.css file, what can you see there:<\/p>\r\n

\u00a0At the beginning of the css file you can see:<\/p>\r\n

columns:24
\r\nColumn width:30
\r\nGutter width:10<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

So the intial file info shows you the number of columns used, the columns width and gutter width. <\/p>\r\n

Then you can see the class .container_24{}<\/strong> – this class should be used for the container that will keep all you website content. <\/p>\r\n\r\n

Note: the main class could be called container_12<\/strong> or container 16<\/strong> depending on the number of columns used. <\/p>\r\n\r\n

Then the classes .grid_1<\/strong>, .grid_2<\/strong> etc. – these classses could be used to set the width of the inner blocks. The blocks with grid classes should be put inside the block with class container_24. <\/p>\r\n\r\n

The classes defines the width of the blocks:<\/p>\r\n\r\n

\r\n.container_24 .grid_2 {
\r\nwidth:70px;
\r\n} \r\n<\/pre>\r\n\r\n
 <\/p>\r\n
For example the code for the following layout is:<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n
<div class="container_24">
\r\n<div class="grid_9">Some content<\/div>
\r\n<div class="grid_15">Some content<\/div>
\r\n<div class="grid_12">Some content<\/div>
\r\n<div class="grid_12">Some content<\/div>
\r\n<\/div>\r\n<\/pre>\r\n\r\n
In this html layout the following grid classes have been used:<\/p>\r\n\r\n
\r\n.container_24 {\r\n\tmargin-left: auto;\r\n\tmargin-right: auto;\r\n\twidth: 960px;\r\n}\r\n\r\n.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {\r\n\tdisplay:inline;\r\n\tfloat: left;\r\n\tposition: relative;\r\n\tmargin-left: 5px;\r\n\tmargin-right: 5px;\r\n}\r\n\r\n.container_24 .grid_9 {\r\n\twidth:350px;\r\n}\r\n\r\n.container_24 .grid_12 {\r\n\twidth:470px;\r\n}\r\n\r\n.container_24 .grid_15 {\r\n\twidth:590px;\r\n}\r\n<\/pre>\r\n\r\n\r\n\r\n
You can also use such additional classes as: <\/p>\r\n
.prefix_1<\/strong>, .prefix_2<\/strong> etc – defines the block left padding (the block’s indent from the left side);<\/p>\r\n
.suffix_1<\/strong>, .suffix_2<\/strong> etc – defines the block right padding (the block’s indent from the right side);<\/p>\r\n
<\/p>\r\n
More information about the grid960 system you can see at the official website at http:\/\/960.gs\/<\/a>. <\/p>\r\n
<\/p>\r\n

\r\n<\/p>","protected":false},"excerpt":{"rendered":"
Browsing through the template’s source code and styles you may have seen the classes like : “grid_6”, “grid_8”. These are the classes used by the grid 960 system. Let’s see what this system is and what it can offer. The 960 Grid System is an effort to streamline web development workflow by providing commonly used […]<\/p>\n","protected":false},"author":2,"featured_media":10207,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[256],"tags":[651,514,1054,517],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/10166"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=10166"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/10166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/10207"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=10166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=10166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=10166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}