The methods currently available for the $layout and $layoutcolumn objects make it easy to build a layout based on grid-template-columns: repeat(12, 1fr). (Or the equivalent flex/float version.) This type of layout uses classes on each cell to indicate how wide it should be. However, it also requires breakpoints to occur for all possible layouts at the same time. Even though a 1/2, 1/2 layout could remain side-by-side at narrower viewports than a 1/4, 1/4, 1/4, 1/4 layout, the CSS has no way to handle that since it doesn’t know how many children there are in the row, or how narrow the narrowest cell is.
An alternative way to style layouts uses classes like .columns-1-1 (for 1/2, 1/2) and .columns-2-1 (for 2/3, 1/3) on the container element and (possibly) no classes on the cell elements themselves. In this way the breakpoint for a 1/2, 1/2 layout can be placed at a narrow viewport width than the breakpoint for a 1/3, 1/3, 1/3 layout, and a 1/4, 3/4 layout could be collapsed to a 1/2, 1/2 layout when the screen is too narrow for the 1/4 column before giving up and going completely vertical.
(The drawback to that approach is that you can’t build arbitrary columns in the HTML - you’re limited to the possibilities explicitly written in the CSS. Since the layout field only allows a set number of possibilities anyway, and it’s usually restricted by the developer even further, that’s not really an issue in this case.)
A method like $layout->kind() == "1/2, 1/2" or something similar that indicates which layout the editor clicked would be helpful. Then the appropriate class can be placed on the row element.