{"id":1552,"date":"2025-03-17T10:31:18","date_gmt":"2025-03-17T14:31:18","guid":{"rendered":"https:\/\/sls.gmu.edu\/web\/?p=1552"},"modified":"2025-03-17T10:31:18","modified_gmt":"2025-03-17T14:31:18","slug":"grid-layouts-in-cascade","status":"publish","type":"post","link":"https:\/\/sls.gmu.edu\/web\/2025\/03\/17\/grid-layouts-in-cascade\/","title":{"rendered":"Grid Layouts in Cascade"},"content":{"rendered":"

Some HTML tips for creating grid layouts in Cascade.<\/p>\n

Create a three-column grid with thumbnail and link text<\/h2>\n
<div class=\"grid3 fcm\">\r\n\t<a href=\"\">\r\n           <img alt=\"\" src=\"\/render\/file.act?path=\/assets\/images\/photo.jpg\" \/> \r\n           Link text\r\n        <\/a>\r\n        <a href=\"\">\r\n           <img alt=\"\" src=\"\/render\/file.act?path=\/assets\/images\/photo.jpg\" \/> \r\n           Link text\r\n        <\/a>\r\n        <a href=\"\">\r\n           <img alt=\"\" src=\"\/render\/file.act?path=\/assets\/images\/photo.jpg\" \/> \r\n           Link text\r\n        <\/a>\r\n<\/div><\/code><\/pre>\n
These classes grid2<\/code>, grid3<\/code>, grid4<\/code>, grid5<\/code>, grid6<\/code> can be used to set desired columns. The fcm<\/code> class, which stands for First Child Margin<\/strong>, is required to reset the first child from the main CSS. The fcm<\/code> class gives the first child the same margin as the rest of the children.<\/p>\n
Use Span Classes<\/h2>\n
The grid2<\/code> class can be used for more flexibility. For example, let\u2019s create a 3-column grid with one narrow column and a wide column:<\/p>\n
<div class=\"grid3 fcm\">\r\n\t<section><\/section>\r\n        <section class=\"span2\"><\/section>\r\n<\/div><\/code><\/pre>\n
These classes span2<\/code>, span3<\/code>, span4<\/code>, span5<\/code> can be used to set desired span column.<\/p>\n","protected":false},"excerpt":{"rendered":"
Some HTML tips for creating grid layouts in Cascade. Create a three-column grid with thumbnail and link text <div class=”grid3 fcm”> <a href=””> <img alt=”” src=”\/render\/file.act?path=\/assets\/images\/photo.jpg” \/> Link text <\/a> <a href=””> <img alt=”” src=”\/render\/file.act?path=\/assets\/images\/photo.jpg” \/> Link text <\/a> <a href=””> <img alt=”” src=”\/render\/file.act?path=\/assets\/images\/photo.jpg” \/> Link text <\/a> <\/div> These classes grid2, grid3, grid4, grid5, … Continue reading “Grid Layouts in Cascade”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[45],"tags":[51],"class_list":["post-1552","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-cascade"],"_links":{"self":[{"href":"https:\/\/sls.gmu.edu\/web\/wp-json\/wp\/v2\/posts\/1552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sls.gmu.edu\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sls.gmu.edu\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sls.gmu.edu\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sls.gmu.edu\/web\/wp-json\/wp\/v2\/comments?post=1552"}],"version-history":[{"count":0,"href":"https:\/\/sls.gmu.edu\/web\/wp-json\/wp\/v2\/posts\/1552\/revisions"}],"wp:attachment":[{"href":"https:\/\/sls.gmu.edu\/web\/wp-json\/wp\/v2\/media?parent=1552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sls.gmu.edu\/web\/wp-json\/wp\/v2\/categories?post=1552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sls.gmu.edu\/web\/wp-json\/wp\/v2\/tags?post=1552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}