diff --git a/src/cg/03-ui-components.cg b/src/cg/03-ui-components.cg
index e35af10..a06261a 100644
--- a/src/cg/03-ui-components.cg
+++ b/src/cg/03-ui-components.cg
@@ -381,47 +381,52 @@ measureText = config \
   };
 
 # new CG layout
-LayoutChild = Fixed Int (Int\ Int \ UI) | Flex Int (Int \ Int \ UI);
 
-layout = constraints children \
+LayoutChild = Fixed Int (Int\ Int \ UI) | Flex Int (Int \ Int \ UI);
+Alignment = Start | Center | End;
+Direction = Col | Row;
+
+layoutDir = dir constraints children \
+  mainSize = dir | Col \ constraints.h | Row \ constraints.w;
+  crossSize = dir | Col \ constraints.w | Row \ constraints.h;
+
   # Pass 1: sum fixed heights, total flex weight
   info = fold (acc child \ child
-    | Fixed h _ \ acc.{ fixedH = acc.fixedH + h }
+    | Fixed s _ \ acc.{ fixedMain = acc.fixedMain + s }
     | Flex n _ \ acc.{ totalFlex = acc.totalFlex + n }
-   ) { fixedH = 0, totalFlex = 0 } children;
+   ) { fixedMain = 0, totalFlex = 0 } children;
 
-   remainingH = constraints.h - info.fixedH;
+   remaining = mainSize - info.fixedMain;
 
    # Pass 2
    fold (acc child \
      allocated = (child
-      | Fixed h view \ { h = h, view = view }
-      | Flex n view \ { h = remainingH * n / info.totalFlex, view = view });
+       | Fixed s view \ { s = s, view = view }
+       | Flex n view \ { s = remaining * n / info.totalFlex, view = view });
 
-     rendered = ui.positioned {
-       x = 0,
-       y = acc.y,
-       child = allocated.view constraints.w allocated.h
-     };
+      childW = dir | Col \ crossSize | Row \ allocated.s;
+      childH = dir | Col \ allocated.s | Row \ crossSize;
+      posX = dir | Col \ 0 | Row \ acc.pos;
+      posY = dir | Col \ acc.pos | Row \ 0;
 
-    acc.{ y = acc.y + allocated.h, children = [...acc.children, rendered] }
-  ) { y = 0, children = [] } children
+      rendered = ui.positioned {
+        x = posX, y = posY,
+        child = allocated.view childW childH
+      };
+
+    acc.{ pos = acc.pos + allocated.s, children = [...acc.children, rendered] }
+  ) { pos = 0, children = [] } children
   ~ (r \ r.children)
   ~ (c \ ui.stack { children = c });
 
+col = layoutDir Col;
+rol = layoutDir Row;
+
 testApp = name \
   { view = ctx \
-    # ui.rect { w = 10, h = 10 },
-    layout { w = ctx.w, h = ctx.h } [
+    col { w = ctx.w, h = ctx.h } [
       Fixed 40 (w h \ box { w = w, h = h, color = "red", child = text "Header" }),
       Flex 1 (w h \ box { w = w, h = h, color = "#1a1a2e", child = text "Main content" }),
       Fixed 30 (w h \ box { w = w, h = h, color = "blue", child = text "Footer" }),
     ]
   };
-
-testApp2 = ctx \
-  layout { w = ctx.w, h = ctx.h } [
-    Fixed 40 (w h \ box { w = w, h = h, color = "red", child = text "Header" }),
-    Flex 1 (w h \ box { w = w, h = h, color = "#1a1a2e", child = text "Main content" }),
-    Fixed 30 (w h \ box { w = w, h = h, color = "blue", child = text "Footer" }),
-  ];