Box, Flexbox, and Grid

HTML All The Things - Web Development, Web Design, Small Business

We dive into the different CSS layout methods that have evolved over recent years including box model, flexbox, and grid.

Segment 1 - Layout Models

• StackChief reference article
• Box Model
  • Elements comprise of: content, padding, border, margin
  • Dimensions like height and width
  • Floats and clearfix
  • CSS Box Model - W3Schools article
• Flexbox
  • Evolution of the box model
  • Comprises of a container element called the flex container, which "control" their child elements called flex items
  • Flexbox is fantastic for responsive layouts
  • 1 dimensional layouts
• CSS Grid
  • New CSS layout method that is supported in the latest version of major browsers (IE doesn't have support)
  • 2 dimensional layouts
  • Can customize every property of the grid
    • # of rows and columns
    • size of row in various metrics (px, %, vh, vw, auto)
    • spacing between rows and columns
  • Very clean code - no need for row and column containers

Segment 2 - Box vs Flexbox vs Grid

• Responsivity
  • Box, flexbox, and grid can all be used to make responsive layouts
  • Many of our production websites are still in box layout, they still work without issue on modern browsers and devices
• Layouts
  • Basic sites can use any of the layout models
  • Site components (ie navbar) can be made easily with flexbox due to their one dimensional layout
  • Full site structures are easier to make with CSS grid due to two dimensional column and row functionality
• Easy of Use
  • Matt believes the box model is easiest to learn - especially when learning how web pages flow
    • Box model is more human readable, whilst flexbox allows for more complex layouts with less code and micromanaging
• Links
  • Box Model - https://caniuse.com/#feat=inline-block
  • Flexbox - https://caniuse.com/#search=flex

Web News - 'Unobtrusive Ads'

• Ad strategies - which are you ok with?
  • Sponsored posts
  • Banner ads (Google Ads, etc.)
  • Full page timed ads
  • Sidebar ads
  • Chumbox (From around the web, recommended for you)
• What are some ad strategies that annoy you?
• Do you think ads on a web page or app are a fair way to monetize? (freemium ad supported)
• Do you care what companies' ads are served to you? (ie you don't like Coke but like Pepsi)

Support Us

• TP Link Deco Whole Home Mesh WiFi System (Amazon Affiliates Link)
• Become a Patreon Supporter

You can find us on...

Facebook | Twitter | Instagram |

RSS | Spotify | Reddit

Medium | YouTube | GitHub