Box, Flexbox, and Grid

90 min • 26 september 2018

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