Box, Flexbox, and Grid

Published: Sept. 26, 2018, 4 p.m.

b'We dive into the different CSS layout methods that have evolved over recent years including box model, flexbox, and grid.\\nSegment 1 - Layout Models\\nStackChief reference article\\nBox Model\\nElements comprise of: content, padding, border, margin\\nDimensions like height and width\\nFloats and clearfix\\nCSS Box Model - W3Schools article\\n\\nFlexbox\\nEvolution of the box model\\nComprises of a container element called the flex container, which "control" their child elements called flex items\\nFlexbox is fantastic for responsive layouts\\n1 dimensional layouts\\n\\nCSS Grid\\nNew CSS layout method that is supported in the latest version of major browsers (IE doesn\'t have support)\\n2 dimensional layouts\\nCan customize every property of the grid\\xa0\\n# of rows and columns\\nsize of row in various metrics (px, %, vh, vw, auto)\\nspacing between rows and columns\\n\\nVery clean code - no need for row and column containers\\n\\nSegment 2 - Box vs Flexbox vs Grid\\nResponsivity\\nBox, flexbox, and grid can all be used to make responsive layouts\\nMany of our production websites are still in box layout, they still work without issue on modern browsers and devices\\n\\nLayouts\\nBasic sites can use any of the layout models\\nSite components (ie navbar) can be made easily with flexbox due to their one dimensional layout\\nFull site structures are easier to make with CSS grid due to two dimensional column and row functionality\\n\\nEasy of Use\\nMatt believes the box model is easiest to learn - especially when learning how web pages flow\\nBox model is more human readable, whilst flexbox allows for more complex layouts with less code and micromanaging\\n\\n\\nLinks\\nBox Model - https://caniuse.com/#feat=inline-block\\nFlexbox -\\xa0https://caniuse.com/#search=flex\\n\\nWeb News - \'Unobtrusive Ads\'\\nAd strategies - which are you ok with?\\nSponsored posts\\nBanner ads (Google Ads, etc.)\\nFull page timed ads\\nSidebar ads\\nChumbox (From around the web, recommended for you)\\n\\nWhat are some ad strategies that annoy you?\\nDo you think ads on a web page or app are a fair way to monetize? (freemium ad supported)\\nDo you care what companies\' ads are served to you? (ie you don\'t like Coke but like Pepsi)\\nSupport Us\\nTP Link Deco Whole Home Mesh WiFi System (Amazon Affiliates Link)\\nBecome a Patreon Supporter\\nYou can find us on...\\nFacebook\\xa0|\\xa0Twitter\\xa0|\\xa0Instagram\\xa0|\\xa0\\nRSS |\\xa0Spotify\\xa0| Reddit\\nMedium\\xa0|\\xa0YouTube\\xa0|\\xa0GitHub'