{"id":5265,"date":"2012-07-20T06:39:17","date_gmt":"2012-07-20T14:39:17","guid":{"rendered":"https:\/\/graphpaperpress.com\/?post_type=tips&#038;p=5265"},"modified":"2012-07-20T07:08:50","modified_gmt":"2012-07-20T15:08:50","slug":"create-four-column-grid-template","status":"publish","type":"tips","link":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/","title":{"rendered":"Create Four Column Grid Template"},"content":{"rendered":"<p>Grids. I know you love them! They are one of the most requested design features which we typically add to most of our <a title=\"WordPress photo themes\" href=\"https:\/\/graphpaperpress.com\/themes\/\">WordPress photo themes<\/a>. In the following tutorial, I show you how to use CSS &#8220;pseudo\u00a0classes&#8221; to achieve a full-page four column grid. With a few small tweaks, you could adapt the template to support any number of columns that you prefer. This comes in handy when building archive pages for portfolio templates. Here is what the final result will look like:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5268\" title=\"page-grid\" src=\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/page-grid.jpg\" alt=\"\" width=\"690\" height=\"676\" \/><\/p>\n<p>Lets say your HTML looks like this:<\/p>\n<pre class=\"brush: html; gutter: true\">&lt;div class=&quot;columns&quot;&gt;\r\n &lt;div class=&quot;column&quot;&gt;&lt;\/div&gt;\r\n &lt;div class=&quot;column&quot;&gt;&lt;\/div&gt;\r\n &lt;div class=&quot;column&quot;&gt;&lt;\/div&gt;\r\n &lt;div class=&quot;column&quot;&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Here is the CSS for the four column grid that you could add to your stylesheet:<\/p>\n<pre class=\"brush: css; gutter: true\">.column { float: left; margin: 0 2.5% 1em 0; width: 22.5%; }\r\n.column:nth-child(4n) { margin-right: 0; }\r\n.column:nth-child(4n+1) { clear: left; }<\/pre>\n<p>Pseudo classes allow us to target specific CSS selectors. In our example above, we&#8217;re using pseudo classes to check for the fourth column (.column:nth-child(4n)) to remove the right margin on that specific column and for the first, fifth, ninth columns (.column:nth-child(4n+1) to clear the float left property for proper column stacking. This ensures our grid properly fills the containing div. For more info on pseudo classes, see <a href=\"http:\/\/css-tricks.com\/pseudo-class-selectors\/\">this CSS Tricks article<\/a>.<\/p>\n<p>Disclaimer: CSS pseudo classes only work in modern browsers. They don&#8217;t work in IE versions before 9.<\/p>\n<p>You want 5 columns? No problem! Change the 4n to 5n. Then, change the .columns margin to margin: 0 2% 1em 0; and the width to width: 18%;.<\/p>\n<p>To take this concept further and apply it to WordPress themes, I&#8217;ve attached a page template called &#8220;Grid&#8221; that you can add to your active theme folder to create the layout seen above. The template is well commented, so please check them out for tweaking the template to your liking. Enjoy!<\/p>\n<p><a class=\"button\" href=\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/add-file-inside-to-theme.zip\">Download Grid Page Template<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Grids. I know you love them! They are one of the most requested design features which we typically add to most of our WordPress photo themes. In the following tutorial, I show you how to use CSS &#8220;pseudo\u00a0classes&#8221; to achieve a full-page four column grid. With a few small tweaks, you could adapt the template [&hellip;]<\/p>\n","protected":false},"author":4765,"featured_media":5268,"comment_status":"open","ping_status":"open","template":"","meta":{"_acf_changed":false},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.9 (Yoast SEO v22.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create Four Column Grid Template WordPress Tip | Graph Paper Press<\/title>\n<meta name=\"description\" content=\"Grids. I know you love them! They are one of the most requested design features which we typically add to most of our WordPress photo themes. In the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Four Column Grid Template\" \/>\n<meta property=\"og:description\" content=\"Grids. I know you love them! They are one of the most requested design features which we typically add to most of our WordPress photo themes. In the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/\" \/>\n<meta property=\"og:site_name\" content=\"Graph Paper Press\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/gppthemes\" \/>\n<meta property=\"article:modified_time\" content=\"2012-07-20T15:08:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/page-grid.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"690\" \/>\n\t<meta property=\"og:image:height\" content=\"676\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/\",\"url\":\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/\",\"name\":\"Create Four Column Grid Template WordPress Tip | Graph Paper Press\",\"isPartOf\":{\"@id\":\"https:\/\/graphpaperpress.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/page-grid.jpg\",\"datePublished\":\"2012-07-20T14:39:17+00:00\",\"dateModified\":\"2012-07-20T15:08:50+00:00\",\"description\":\"Grids. I know you love them! They are one of the most requested design features which we typically add to most of our WordPress photo themes. In the\",\"breadcrumb\":{\"@id\":\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#primaryimage\",\"url\":\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/page-grid.jpg\",\"contentUrl\":\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/page-grid.jpg\",\"width\":\"690\",\"height\":\"676\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/graphpaperpress.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips\",\"item\":\"https:\/\/graphpaperpress.com\/tips\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Create Four Column Grid Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphpaperpress.com\/#website\",\"url\":\"https:\/\/graphpaperpress.com\/\",\"name\":\"Graph Paper Press\",\"description\":\"Graph Paper Press specializes in photo, video and multimedia themes for WordPress.\",\"publisher\":{\"@id\":\"https:\/\/graphpaperpress.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphpaperpress.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphpaperpress.com\/#organization\",\"name\":\"Graph Paper Press\",\"url\":\"https:\/\/graphpaperpress.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/graphpaperpress.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2015\/11\/cropped-logo.png\",\"contentUrl\":\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2015\/11\/cropped-logo.png\",\"width\":512,\"height\":512,\"caption\":\"Graph Paper Press\"},\"image\":{\"@id\":\"https:\/\/graphpaperpress.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/gppthemes\",\"https:\/\/x.com\/graphpaperpress\",\"https:\/\/www.youtube.com\/channel\/UCUebYoxUAXkPL9mNoNTMQDg\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Four Column Grid Template WordPress Tip | Graph Paper Press","description":"Grids. I know you love them! They are one of the most requested design features which we typically add to most of our WordPress photo themes. In the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/","og_locale":"en_US","og_type":"article","og_title":"Create Four Column Grid Template","og_description":"Grids. I know you love them! They are one of the most requested design features which we typically add to most of our WordPress photo themes. In the","og_url":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/","og_site_name":"Graph Paper Press","article_publisher":"https:\/\/facebook.com\/gppthemes","article_modified_time":"2012-07-20T15:08:50+00:00","og_image":[{"width":"690","height":"676","url":"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/page-grid.jpg","type":"image\/jpeg"}],"twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/","url":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/","name":"Create Four Column Grid Template WordPress Tip | Graph Paper Press","isPartOf":{"@id":"https:\/\/graphpaperpress.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#primaryimage"},"image":{"@id":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#primaryimage"},"thumbnailUrl":"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/page-grid.jpg","datePublished":"2012-07-20T14:39:17+00:00","dateModified":"2012-07-20T15:08:50+00:00","description":"Grids. I know you love them! They are one of the most requested design features which we typically add to most of our WordPress photo themes. In the","breadcrumb":{"@id":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#primaryimage","url":"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/page-grid.jpg","contentUrl":"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2012\/07\/page-grid.jpg","width":"690","height":"676"},{"@type":"BreadcrumbList","@id":"https:\/\/graphpaperpress.com\/tips\/create-four-column-grid-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/graphpaperpress.com\/"},{"@type":"ListItem","position":2,"name":"Tips","item":"https:\/\/graphpaperpress.com\/tips\/"},{"@type":"ListItem","position":3,"name":"Create Four Column Grid Template"}]},{"@type":"WebSite","@id":"https:\/\/graphpaperpress.com\/#website","url":"https:\/\/graphpaperpress.com\/","name":"Graph Paper Press","description":"Graph Paper Press specializes in photo, video and multimedia themes for WordPress.","publisher":{"@id":"https:\/\/graphpaperpress.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphpaperpress.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/graphpaperpress.com\/#organization","name":"Graph Paper Press","url":"https:\/\/graphpaperpress.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/graphpaperpress.com\/#\/schema\/logo\/image\/","url":"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2015\/11\/cropped-logo.png","contentUrl":"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2015\/11\/cropped-logo.png","width":512,"height":512,"caption":"Graph Paper Press"},"image":{"@id":"https:\/\/graphpaperpress.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/gppthemes","https:\/\/x.com\/graphpaperpress","https:\/\/www.youtube.com\/channel\/UCUebYoxUAXkPL9mNoNTMQDg"]}]}},"_links":{"self":[{"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/tips\/5265"}],"collection":[{"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/tips"}],"about":[{"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/types\/tips"}],"author":[{"embeddable":true,"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/users\/4765"}],"replies":[{"embeddable":true,"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/comments?post=5265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/media\/5268"}],"wp:attachment":[{"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/media?parent=5265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}