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>

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>