Layout using multi-col vs flex-col vs grid

[vikramrojo]

Placeholder for exploring how these new css specifications work together. Initial thoughts are that multi-col can be used within flex-col or grid, but typically a layout would use flex-col or grid. Ideally, all layouts would inherit the same variables, eg. gutter.

See: https://medium.com/@patrickbrosset/css-grid-css-multi-columns-7664f59bb60c & https://alligator.io/css/multi-column-layouts/

[vikramrojo]

Layout schema proposal: .cols > .col where cols handles margin auto, & display: flexbox with no padding .grid > .grid-col / .grid-row where grid handles display: grid with vars for grid-template-columns & grid-template-rows that are passed through style="--grid-cols: 4" and grid-col uses vars for spanning that are passed through style="--grid-column: 3/4"

[vikramrojo]

Created a codepen that captures how you can use flexbox or grid or grid in flexbox and the styles method to pass variables for grid. Question, is the styles method ok or strive for purely classes @winkerVSbecks @chasestarr? https://codepen.io/atav1k/pen/wjwOpp

[winkerVSbecks]

Don't really have a strong opinion. If you find yourself repeating the same styles then maybe make a class.

[vikramrojo]

Grids vs flex columns treat gutters differently, padding vs margins.

[vikramrojo]

Confusions between .col- & .col-count with css selectors so using multi-col to distinguish.