breakout layout

src/extra/layout.css

@@ -0,0 +1,44 @@
+/* Layout System */
+
+main {
+    margin: 0 auto;
+    padding: 1rem;
+    max-width: 1140px;
+}
+
+.flex {display: flex;}
+
+.grid {
+    display: grid;
+    gap: .25rem;
+    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+}
+
+.row {
+    display: flex;
+    flex: 0 1 auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: .5rem;
+    margin:0;
+    padding: .25rem 0;
+}
+
+.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+    flex: 1;
+    max-width: 100%;
+}
+
+.col-1 {flex: 1 !important;}
+.col-2 {flex: 2 !important;}
+.col-3 {flex: 3 !important;}
+.col-4 {flex: 4 !important;}
+.col-5 {flex: 5 !important;}
+
+.right {float:right}
+.left {float:left}
+.center {text-align: center;}