Ultra-simple, automatic, non-float, 1-4 column, grid system

Question

Has everyone moved over to CSS Grid and/or Flexbox? If not, I've maintained and evolved this system over a fair amount of time, the concept was derived originally, I believe, from Mary Lou, although I don't recall where the article is.

I was never a proponent of floats, although the using font-size:0 to clear whitespace isn't an ideal solution either, neither is a DOM Cleaner function in javascript. Probably minimized (non-formatted) HTML without whitespaces is ideal, just difficult to maintain... There's a lot of other "hacky" concepts, comments in HTML, bleh... but I landed on the font-size:0. This served me well and I still use it in a handful of projects, though I've mostly moved to a CSSGrid/Flexbox combination as of late.

It's a similar to:

.table {display: table}
.table>div {display: table-cell}

With a higher degree of flexibility, if you need heights to match, the above or flexbox/css grid are probably a better solution. or min-height on columns if it's known content.

Any ideas to improve or flaws, let me know.

.autogrid {
 padding: .5rem; /* 8px */
 /** remove whitespace from container */
 font-size: 0;
 box-sizing: border-box}
 .autogrid>* {
 box-sizing: inherit; /* inherit border-box */
 display: block;
 font-size: inherit; /* inherit 0px */
 margin: 0 auto .5rem; /* 0 auto 8px */
 padding: 0 .5rem .5rem /* 0 8px 8px */}
 /** create vertical space in columns & prevent margin-collapsing */
 .autogrid>*:before {
 content: '';
 display: inline-block;
 vertical-align: 0; /* baseline or 0% */
 width: 0;
 height: .5rem /* 8px */}
 @media (min-width: 33.75em) { /* 540px */
 .autogrid>* {
 display: inline-block;
 margin: .5rem; /* 8px */
 /** align columns/cards to top, middle, etc. */
 vertical-align: top}
 .autogrid>*:first-child:nth-last-child(1),
 .autogrid>*:first-child:nth-last-child(3),
 .autogrid>*:first-child:nth-last-child(3)~* {width: calc(100% - 1rem) /* 100% - 16px */}
 .autogrid>*:first-child:nth-last-child(4),
 .autogrid>*:first-child:nth-last-child(4)~*,
 .autogrid>*:first-child:nth-last-child(2),
 .autogrid>*:first-child:nth-last-child(2)~* {width: calc(50% - 1rem) /* 50% - 16px */}
 }
 @media (min-width: 50em) { /* 800px */
 .autogrid>*:first-child:nth-last-child(3),
 .autogrid>*:first-child:nth-last-child(3)~* {width: calc(33.333% - 1rem) /* 33.333% - 16px */}
 .autogrid>*:first-child:nth-last-child(4),
 .autogrid>*:first-child:nth-last-child(4)~* {width: calc(25% - 1rem) /* 25% - 16px */}
 }
 /**
 ###############
 # DEMO ONLY #
 ###############
 html:
 `
 <div class="autogrid">
 <div><p>col</p></div>
 <div><p>col</p></div>
 <div><p>col</p></div>
 <div><p>col</p></div>
 </div>
 `
 */
 html {
 font: 400 100%/1 sans-serif;
 color: #333}
 body,
 p {
 font-size: 1rem; /* 16px */
 line-height: 1.45; /* 145% or 23.2px */
 margin: 0}
 .autogrid>* {text-align: center}
 .autogrid>*:first-child,
 .autogrid>*:nth-child(2) {color: #fff}
 .autogrid>*:nth-child(3),
 .autogrid>*:last-child {color: inherit}
 .autogrid>*:first-child {background-color: #4af}
 .autogrid>*:nth-child(2) {background-color: #fa4}
 .autogrid>*:nth-child(3) {background-color: #def}
 .autogrid>*:last-child {background-color: #fed}

<div class="autogrid">
 <div><p>col</p></div>
 <div><p>col</p></div>
 <div><p>col</p></div>
 <div><p>col</p></div>
</div>

• soulshined: I was never a proponent of floats whyyy? Float has it's uses, even in 2019, even in conjunction with a flex-driven project. I don't think they are synonymous, and I don't understand the hesitation to use it, it's not deprecated for a reason. The only thing I notice just by looking at it, is if one box has more content than the other there would be a lot of whitespace? But I really like this, looks great!
• darcher: I do use float's for various purposes; however, seldom for grid. I suppose I should have worded that a little differently. As for whitespace, that's a problem with many grid systems (maybe even grids in general?), usually a different layout concept is better if there's too many cases of unbalanced content; or tailoring content slightly.

Answer 1

This is not to take away at all from your system above, which is very smart.

I'm still very much on the CSS Grid learning curve and I was genuinely curious to see how straightforward / difficult it might be to replicate your output above, using CSS Grid.

.grid {
 display: grid;
 grid-template: repeat(4, 42px) / auto;
 grid-gap: 8px;
}
div p {
 margin: 0;
 padding: 0;
 line-height: 42px;
 text-align: center;
 font-family: sans-serif;
}
.box-1 {color: #fff; background-color: #4af;}
.box-2 {color: #fff; background-color: #fa4;}
.box-3 {color: #000; background-color: #def;}
.box-4 {color: #000; background-color: #fed;}
@media (min-width: 540px) {
 
 .grid {grid-template: repeat(2, 42px) / repeat(2, auto); grid-gap: 16px;}
}
@media (min-width: 800px) {
 
 .grid {grid-template: 42px / repeat(4, auto);}
}

<div class="grid">
 <div class="box-1"><p>col</p></div>
 <div class="box-2"><p>col</p></div>
 <div class="box-3"><p>col</p></div>
 <div class="box-4"><p>col</p></div>
</div>