grid og flex css

CSS/flex/index.html

@@ -9,13 +9,14 @@
         div.main {
             background-color: transparent;
             border-bottom: none;
-            display: flex;
+            display: grid;
-            flex-direction: row;
+            grid-template-columns: 1fr 2fr 1fr;
-            flex-wrap: wrap;
+            grid-template-rows: 1fr 1fr 1fr;
             align-items: center;
         }
 
         div {
+            flex-grow: 1;
             background-color: lightblue;
             border-bottom: 1px solid black;
         }
@@ -30,7 +31,7 @@
         <div>
             <h2>Verden!</h2>
         </div>
-        <div>Aaaaa aaaa 
+        <div>Aaaaa aaaa<br>
              aaaa aaaa
         </div>
         <div>Bbbbb bbbb bbbb bbbb</div>
@@ -39,7 +40,7 @@
         <div>
             <p>Sint exercitation est duis proident velit duis cupidatat ex aliqua eu.
                 Mollit tempor velit est occaecat laboris mollit dolore laborum id.
-                Sunt dolore mollit ex laboris veniam eu incididunt culpa.</p>
+                Sunt dolore mollit <br> ex laboris veniam eu incididunt culpa.</p>
         </div>
 
         <div>

prosjekt/index.html

@@ -13,16 +13,20 @@
                 "sidebar main"
                 "sidebar footer footer";
         }
+
         .item-a {
             grid-area: sidebar;
         }
+
         .item-b {
             grid-area: topbar;
         }
-        .item-c{
+
+        .item-c {
             grid-area: main;
         }
-        .item-d{
+
+        .item-d {
             grid-area: footer;
         }
     </style>

prosjekt/plan.txt

@@ -6,6 +6,6 @@ nøkkeltek:
     * incus
     * libvirt
 
-agent - clustering - go
+agent - clustering - go/rust eller guile
-frontend/web og cli - 
+frontend/web og cli - go
 middleware - bash nix guile