Added tables to compare screen.

src/components/layout/Grid.module.css

@@ -8,6 +8,10 @@
   border-top: 1px solid var(--base300);
 }
 
+.row.compare {
+  grid-template-columns: max-content 1fr 1fr;
+}
+
 .col {
   padding: 20px;
   min-height: 430px;

src/components/layout/Grid.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
 import classNames from 'classnames';
 import { mapChildren } from 'react-basics';
+// eslint-disable-next-line css-modules/no-unused-class
 import styles from './Grid.module.css';
 
 export interface GridProps {
@@ -19,13 +20,13 @@ export function Grid({ className, style, children }: GridProps) {
 
 export function GridRow(props: {
   [x: string]: any;
-  columns?: 'one' | 'two' | 'three' | 'one-two' | 'two-one';
+  columns?: 'one' | 'two' | 'three' | 'one-two' | 'two-one' | 'compare';
   className?: string;
   children?: any;
 }) {
   const { columns = 'two', className, children, ...otherProps } = props;
   return (
-    <div {...otherProps} className={classNames(styles.row, className)}>
+    <div {...otherProps} className={classNames(styles.row, className, { [styles[columns]]: true })}>
       {mapChildren(children, child => {
         return <div className={classNames(styles.col, { [styles[columns]]: true })}>{child}</div>;
       })}