6
\$\begingroup\$

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>

\$\endgroup\$
  • 1
    \$\begingroup\$ 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! \$\endgroup\$ – soulshined Feb 16 '19 at 16:39
  • \$\begingroup\$ 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. \$\endgroup\$ – darcher Feb 18 '19 at 22:07
1
\$\begingroup\$

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>

|improve this answer|||||
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.