How do we go about setting up columns with CSS?

We want flexibility for three to 4 columns with control over their width and ability to change the size of the page. We’re willing to not support Microsoft Browsers prior to edge.

Support

• Chrome, Edge (basically Chrome)

• Safari

• FireFox

What are the different possible solutions:

• https://www.w3schools.com/css/css3_multiple_columns.asp

  • Gut reaction - seems very hard coded and not working from fundamentals.

  • https://developer.mozilla.org/en-US/docs/Web/CSS/columns

• CSS which mimics table layout

  • Gut reaction - seems complicated and obscure

• Chain things together

  • float property

  • fancy selectors that depend on order

• Flex box stuff https://www.w3schools.com/css/css3_flexbox_container.asp

• Third party libraries like bootstrap

  • Bleah. - opaque and unmaintainable.

• Use CSS to remove the box model padding etc. so that 33% of width is actually 33% of the size of the retaining box.

  • Set the margin to zero