Box, Flexbox, and Grid

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

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

You can find us on...

Facebook | Twitter | Instagram | 

RSSSpotify | Reddit

Medium | YouTube | GitHub

00:0000:00
Share | Download(Loading)