<\/div>\n<\/dd>\n<\/dl>\n","protected":false},"excerpt":{"rendered":"
#115: Don’t Overthink It Grids Running time: 17:19 Almost every site on the internet needs some kind of grid. Grids don’t have to be a big complicated framework. You can create one yourself with just a few lines of CSS. #114: Let\u2019s Do Simple Stuff to Make Our Websites Faster Running time: 28:01 Four things, […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-archive.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18979,"url":"https:\/\/css-tricks.com\/video-screencasts\/115-dont-overthink-it-grids\/","url_meta":{"origin":1283,"position":0},"title":"#115: Don’t Overthink It Grids","date":"October 24, 2012","format":false,"excerpt":"Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that's a grid. There are new layout methods in CSS that are getting closer to prime time (like flexbox and grid layout) that will be very great\u2026","rel":"","context":"With 47 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":165577,"url":"https:\/\/css-tricks.com\/video-screencasts\/132-quick-useful-case-sass-math-mixins\/","url_meta":{"origin":1283,"position":1},"title":"#132: A Quick Useful Case for Sass Math and Mixins","date":"March 13, 2014","format":false,"excerpt":"I had a little design situation come up where I was making a fluid grid of boxes with floats. I wanted to specify how many boxes across a row was very easily, and have them flush against both edges of the container. Not too difficult, as we know from not\u2026","rel":"","context":"With 31 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18157,"url":"https:\/\/css-tricks.com\/lodge\/v10\/019-building-a-simple-grid\/","url_meta":{"origin":1283,"position":2},"title":"#019: Building a Simple Grid","date":"September 10, 2012","format":false,"excerpt":"The site design is shaping up to be very grid-like. Our modules will lay out very cleanly into a grid. But aren't grids complex and weird? And maybe we should go use some fancy framework out there? Nah. They're easy. We'll set a simple one up in just a few\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18162,"url":"https:\/\/css-tricks.com\/lodge\/v10\/020-finishing-the-grid-and-setting-up-modules\/","url_meta":{"origin":1283,"position":3},"title":"#020: Finishing the Grid and Setting Up Modules","date":"September 10, 2012","format":false,"excerpt":"Continuing the concept of \"Don't Overthink It Grids\", we get gutters going on in the grid by just using some simple padding. We keep the padding number consistant by reusing our global $padding variable. You'll find that we use that number a ton as we do our styling. We style\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18684,"url":"https:\/\/css-tricks.com\/lodge\/v10\/127-building-the-single-video-page-part-2\/","url_meta":{"origin":1283,"position":4},"title":"#127: Building the Single Video Page, Part 2","date":"October 2, 2012","format":false,"excerpt":"In this screencast we'll finish up code-wranglin' the template for single videos. We start by getting organized in our CSS a bit. Some of the videos.scss file is global to video-related pages. Some is specific to the archival pages and some is specific to single video pages. For now, it\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18250,"url":"https:\/\/css-tricks.com\/lodge\/v10\/032-making-the-grid-responsive\/","url_meta":{"origin":1283,"position":5},"title":"#032: Making The Grid Responsive","date":"September 12, 2012","format":false,"excerpt":"We start out with playing with our blog post module, fiddling around with spacing. We also add the little colored square in the upper left of the module, a visual signifier of the type of content that it is. The next change we make is to lessen some of the\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1283"}],"version-history":[{"count":134,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283\/revisions"}],"predecessor-version":[{"id":376709,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283\/revisions\/376709"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1283"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}