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>
          

Flex DIY

because flex is amazing

<style>
  .container { display: flex; }
  .col { flex: 0 1 100%; }
</style>
          

Un-maximize your browser window and drag the edges in an out to enjoy.

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

See source for height normalization JS

sub four
sub four
six
+2
+2
+2
=6
Syntax highlighting powered by Prism.