justgrid.css

Basic

I want columns that respond at 600px

<div class="row">
  <div class="four col">four</div>

  <div class="four col">
    <div class="row">
      <div class="four col">four<div>
      <div class="eight col">eight<div>
    </div>
  </div>

  <div class="four col row">
    <div class="four col">four<div>
    <div class="eight col">eight<div>
  </div>
</div>
          

Static

non-responsive (watch your padding)

<div class="row static">
  ...
</div>
          

Normalize column heights

add to bottom of body, 378 bytes
does not handle resizing

<script>var rs=window.innerWidth>600?".row":".row.static";for(var r=document.querySelectorAll(rs),i=r.length;i--;){var hasId=!!r[i].id&&r[i].id.length>0;hasId||(r[i].id="jg_"+(new Date).getTime());for(var c=document.querySelectorAll("#"+r[i].id+">.col"),m=0,j=c.length;j--;)m<c[j].offsetHeight&&(m=c[j].offsetHeight);for(var j=c.length;j--;)c[j].style.height=m+"px";hasId||(r[i].id="")}</script>
          
one
a as asd asdf asdfg asdfgh asdfghj asdfghjk
one
static
row
of
.one
cols
one
one
one
one
three
static
quarters
three
four
four
four
Here's your HTML shell
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://crhallberg.com/justgrid/justgrid.css" />
    <style>
      html { font-size: 16px; }
      body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
    </style>
  </head>
  <body>
    <!-- magic -->
  </body>
</html>
 

six

here's the nested normalization test:

PASSING!

sub four
sub four
six
+2
+2
+2
=6

For a more complete JS normalization experience that handles resizing and responsive height, use this at the bottom of your page instead.

This code is running on this page. 590 bytes.

<script>function jsnorm(){var rs=window.innerWidth>600?".row":".row.static";for(var r=document.querySelectorAll(rs),i=r.length;i--;){var hasId=!!r[i].id&&r[i].id.length>0;hasId||(r[i].id="jg_"+(new Date).getTime());for(var c=document.querySelectorAll("#"+r[i].id+">.col"),m=0,j=c.length;j--;){c[j].style.height="auto";m<c[j].offsetHeight&&(m=c[j].offsetHeight);}for(var j=c.length;j--;)c[j].style.height=m+"px";hasId||r[i].removeAttribute("id")}if(window.innerWidth<601)for(var c=document.querySelectorAll(".row:not(.static) .col"),i=c.length;i--;)c[i].style.height="auto"}window.onresize=jsnorm;jsnorm();</script>        
Syntax highlighting powered by Prism.