CSS updates.

src/components/layout/Grid.js

@@ -1,13 +1,18 @@
-import { Row, Column } from 'react-basics';
 import classNames from 'classnames';
 import styles from './Grid.module.css';
+import { mapChildren } from 'react-basics';
+
+export function Grid({ className, ...otherProps }) {
+  return <div {...otherProps} className={classNames(styles.grid, className)} />;
+}
 
 export function GridRow(props) {
-  const { className, ...otherProps } = props;
-  return <Row {...otherProps} className={classNames(styles.row, className)} />;
-}
-
-export function GridColumn(props) {
-  const { className, ...otherProps } = props;
-  return <Column {...otherProps} className={classNames(styles.col, className)} />;
+  const { columns = 'two', className, children, ...otherProps } = props;
+  return (
+    <div {...otherProps} className={classNames(styles.row, className)}>
+      {mapChildren(children, child => {
+        return <div className={classNames(styles.col, { [styles[columns]]: true })}>{child}</div>;
+      })}
+    </div>
+  );
 }

src/components/layout/Grid.module.css

@@ -1,27 +1,52 @@
-.col {
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
+.grid {
+  display: grid;
 }
 
 .row {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
   border-top: 1px solid var(--base300);
-  min-height: 430px;
 }
 
-.row > .col {
+.col {
+  padding: 20px;
+  min-height: 430px;
   border-inline-start: 1px solid var(--base300);
 }
 
-.row > .col:first-child {
+.col:first-child {
   border-inline-start: 0;
   padding-inline-start: 0;
 }
 
-.row > .col:last-child {
+.col:last-child {
   padding-inline-end: 0;
 }
 
+.col.two {
+  grid-column: span 3;
+}
+
+.col.three {
+  grid-column: span 2;
+}
+
+.col.two-one:first-child {
+  grid-column: span 4;
+}
+
+.col.two-one:last-child {
+  grid-column: span 2;
+}
+
+.col.one-two:first-child {
+  grid-column: span 2;
+}
+
+.col.one-two:last-child {
+  grid-column: span 4;
+}
+
 @media only screen and (max-width: 992px) {
   .row {
     border: 0;
@@ -33,4 +58,11 @@
     border-inline-end: 0;
     padding: 20px 0;
   }
+
+  .col.two,
+  .col.three,
+  .col.one-two,
+  .col.two-one {
+    grid-column: span 6 !important;
+  }
 }

src/components/layout/Page.module.css

@@ -4,7 +4,6 @@
   flex-direction: column;
   background: var(--base50);
   position: relative;
-  height: 100%;
   max-width: 1320px;
   margin: 0 auto;
   padding: 0 20px;