diff --git a/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png b/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png
index c640e778e8505..2d6a0dd22fbb2 100644
Binary files a/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png and b/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png differ
diff --git a/frontend/src/scenes/experiments/SecondaryMetrics.tsx b/frontend/src/scenes/experiments/SecondaryMetrics.tsx
index 75d22a10d19ec..9c22022c5efa4 100644
--- a/frontend/src/scenes/experiments/SecondaryMetrics.tsx
+++ b/frontend/src/scenes/experiments/SecondaryMetrics.tsx
@@ -1,4 +1,3 @@
-import { Col, Row } from 'antd'
 import { useActions, useValues } from 'kea'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { Form } from 'kea-forms'
@@ -163,11 +162,11 @@ export function SecondaryMetrics({
                 </Form>
             </LemonModal>
             {experimentId == 'new' || editingExistingExperiment ? (
-                <Row>
-                    <Col>
+                <div className="flex">
+                    <div>
                         {metrics.map((metric, idx) => (
-                            <Row key={idx} className="mt-4 border rounded p-4">
-                                <Row align="middle" justify="space-between" className="w-full mb-3 pb-2 border-b">
+                            <div key={idx} className="mt-4 border rounded p-4">
+                                <div className="flex items-center justify-between w-full mb-3 pb-2 border-b">
                                     <div>
                                         <b>{metric.name}</b>
                                     </div>
@@ -185,7 +184,7 @@ export function SecondaryMetrics({
                                             onClick={() => deleteMetric(idx)}
                                         />
                                     </div>
-                                </Row>
+                                </div>
                                 {metric.filters.insight === InsightType.FUNNELS && (
                                     <ActionFilter
                                         bordered
@@ -226,19 +225,17 @@ export function SecondaryMetrics({
                                         readOnly={true}
                                     />
                                 )}
-                            </Row>
+                            </div>
                         ))}
                         {metrics && !(metrics.length > 2) && (
-                            <Col>
-                                <div className="mb-2 mt-4">
-                                    <LemonButton type="secondary" onClick={openModalToCreateSecondaryMetric}>
-                                        Add metric
-                                    </LemonButton>
-                                </div>
-                            </Col>
+                            <div className="mb-2 mt-4">
+                                <LemonButton type="secondary" onClick={openModalToCreateSecondaryMetric}>
+                                    Add metric
+                                </LemonButton>
+                            </div>
                         )}
-                    </Col>
-                </Row>
+                    </div>
+                </div>
             ) : (
                 <>
                     <div className="card-secondary mt-4 mb-1">Secondary metrics</div>
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.scss b/frontend/src/scenes/feature-flags/FeatureFlag.scss
index 730181e4ad083..dcc1363bde5fd 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.scss
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.scss
@@ -1,4 +1,4 @@
-.variant-form-list {
+.VariantFormList {
     font-size: 13px;
     border: 1px solid var(--border);
     border-radius: var(--radius);
@@ -19,6 +19,10 @@
             align-items: center;
         }
     }
+
+    .VariantFormList__row {
+        grid-template-columns: repeat(24, minmax(0, 1fr));
+    }
 }
 
 .feature-flag-property-display {
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
index 1118c87a2b31d..50443d8cb83b7 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Form, Group } from 'kea-forms'
-import { Row, Col, Radio, Popconfirm, Skeleton, Card } from 'antd'
+import { Radio, Popconfirm, Skeleton, Card } from 'antd'
 import { useActions, useValues } from 'kea'
 import { alphabet, capitalizeFirstLetter } from 'lib/utils'
 import { featureFlagLogic } from './featureFlagLogic'
@@ -78,7 +78,7 @@ export const scene: SceneExport = {
 
 function focusVariantKeyField(index: number): void {
     setTimeout(
-        () => document.querySelector<HTMLElement>(`.variant-form-list input[data-key-index="${index}"]`)?.focus(),
+        () => document.querySelector<HTMLElement>(`.VariantFormList input[data-key-index="${index}"]`)?.focus(),
         50
     )
 }
@@ -732,17 +732,17 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                         <>
                             <h3 className="l3">Variant keys</h3>
                             <div className="border rounded p-4 mb-4 bg-bg-light">
-                                <Row gutter={16} className="font-semibold">
-                                    <Col span={6}>Key</Col>
-                                    <Col span={6}>Description</Col>
-                                    <Col span={9}>Payload</Col>
-                                    <Col span={3}>Rollout</Col>
-                                </Row>
+                                <div className="grid grid-cols-8 gap-4 font-semibold">
+                                    <div className="col-span-2">Key</div>
+                                    <div className="col-span-2">Description</div>
+                                    <div className="col-span-3">Payload</div>
+                                    <div>Rollout</div>
+                                </div>
                                 <LemonDivider className="my-3" />
                                 {variants.map((variant, index) => (
                                     <div key={index}>
-                                        <Row gutter={16}>
-                                            <Col span={6}>
+                                        <div className="grid grid-cols-8 gap-4">
+                                            <div className="col-span-2">
                                                 <Lettermark name={alphabet[index]} color={LettermarkColor.Gray} />
                                                 <CopyToClipboardInline
                                                     tooltipMessage={null}
@@ -754,13 +754,13 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                 >
                                                     {variant.key}
                                                 </CopyToClipboardInline>
-                                            </Col>
-                                            <Col span={6}>
+                                            </div>
+                                            <div className="col-span-2">
                                                 <span className={variant.name ? '' : 'text-muted'}>
                                                     {variant.name || 'There is no description for this variant key'}
                                                 </span>
-                                            </Col>
-                                            <Col span={9}>
+                                            </div>
+                                            <div className="col-span-3">
                                                 {featureFlag.filters.payloads?.[index] ? (
                                                     <JSONEditorInput
                                                         readOnly={true}
@@ -771,9 +771,9 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                         No payload associated with this variant
                                                     </span>
                                                 )}
-                                            </Col>
-                                            <Col span={3}>{variant.rollout_percentage}%</Col>
-                                        </Row>
+                                            </div>
+                                            <div>{variant.rollout_percentage}%</div>
+                                        </div>
                                         {index !== variants.length - 1 && <LemonDivider className="my-3" />}
                                     </div>
                                 ))}
@@ -874,24 +874,22 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                             <span>No payload associated with this flag</span>
                         )
                     ) : (
-                        <Row gutter={16}>
-                            <Col span={12}>
-                                <div className="text-muted mb-4">
-                                    Specify a payload to be returned when the served value is{' '}
-                                    <strong>
-                                        <code>true</code>
-                                    </strong>
-                                </div>
-                                <Group name={['filters', 'payloads']}>
-                                    <Field name="true">
-                                        <JSONEditorInput
-                                            readOnly={readOnly}
-                                            placeholder={'Examples: "A string", 2500, {"key": "value"}'}
-                                        />
-                                    </Field>
-                                </Group>
-                            </Col>
-                        </Row>
+                        <div className="w-1/2">
+                            <div className="text-muted mb-4">
+                                Specify a payload to be returned when the served value is{' '}
+                                <strong>
+                                    <code>true</code>
+                                </strong>
+                            </div>
+                            <Group name={['filters', 'payloads']}>
+                                <Field name="true">
+                                    <JSONEditorInput
+                                        readOnly={readOnly}
+                                        placeholder={'Examples: "A string", 2500, {"key": "value"}'}
+                                    />
+                                </Field>
+                            </Group>
+                        </div>
                     )}
                 </div>
             )}
@@ -899,33 +897,33 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                 <div className="feature-flag-variants">
                     <h3 className="l4">Variant keys</h3>
                     <span>The rollout percentage of feature flag variants must add up to 100%</span>
-                    <div className="variant-form-list space-y-2">
-                        <Row gutter={8} className="label-row">
-                            <Col span={1} />
-                            <Col span={4}>Variant key</Col>
-                            <Col span={6}>Description</Col>
-                            <Col span={8}>
-                                <div className="flex flex-col" style={{ fontWeight: 'normal' }}>
+                    <div className="VariantFormList space-y-2">
+                        <div className="VariantFormList__row grid label-row gap-2 items-center">
+                            <div />
+                            <div className="col-span-4">Variant key</div>
+                            <div className="col-span-6">Description</div>
+                            <div className="col-span-8">
+                                <div className="flex flex-col">
                                     <b>Payload</b>
-                                    <span className="text-muted">
+                                    <span className="text-muted font-normal">
                                         Specify return payload when the variant key matches
                                     </span>
                                 </div>
-                            </Col>
-                            <Col span={4}>
-                                Rollout
+                            </div>
+                            <div className="col-span-4 flex items-center gap-1">
+                                <span>Rollout</span>
                                 <LemonButton type="tertiary" onClick={distributeVariantsEqually}>
                                     (Redistribute)
                                 </LemonButton>
-                            </Col>
-                        </Row>
+                            </div>
+                        </div>
                         {variants.map((variant, index) => (
                             <Group key={index} name="filters">
-                                <Row gutter={8} align="top">
-                                    <Col span={1} style={{ paddingTop: 8 }}>
+                                <div className="VariantFormList__row grid gap-2">
+                                    <div className="flex items-center justify-center">
                                         <Lettermark name={alphabet[index]} color={LettermarkColor.Gray} />
-                                    </Col>
-                                    <Col span={4}>
+                                    </div>
+                                    <div className="col-span-4">
                                         <Field name={['multivariate', 'variants', index, 'key']}>
                                             <LemonInput
                                                 data-attr="feature-flag-variant-key"
@@ -944,8 +942,8 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                 }
                                             />
                                         </Field>
-                                    </Col>
-                                    <Col span={6}>
+                                    </div>
+                                    <div className="col-span-6">
                                         <Field name={['multivariate', 'variants', index, 'name']}>
                                             <LemonInput
                                                 data-attr="feature-flag-variant-name"
@@ -953,8 +951,8 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                 placeholder="Description"
                                             />
                                         </Field>
-                                    </Col>
-                                    <Col span={8}>
+                                    </div>
+                                    <div className="col-span-8">
                                         <Field name={['payloads', index]}>
                                             {({ value, onChange }) => {
                                                 return (
@@ -966,8 +964,8 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                 )
                                             }}
                                         </Field>
-                                    </Col>
-                                    <Col span={3}>
+                                    </div>
+                                    <div className="col-span-3">
                                         <Field name={['multivariate', 'variants', index, 'rollout_percentage']}>
                                             {({ value, onChange }) => (
                                                 <div>
@@ -1012,28 +1010,25 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                 </div>
                                             )}
                                         </Field>
-                                    </Col>
-                                    <Col span={2} style={{ paddingTop: 8 }}>
-                                        <Row>
-                                            {variants.length > 1 && (
-                                                <LemonButton
-                                                    icon={<IconDelete />}
-                                                    status="primary-alt"
-                                                    data-attr={`delete-prop-filter-${index}`}
-                                                    noPadding
-                                                    onClick={() => removeVariant(index)}
-                                                    disabledReason={
-                                                        featureFlag.experiment_set &&
-                                                        featureFlag.experiment_set?.length > 0
-                                                            ? 'Cannot delete variants from a feature flag that is part of an experiment'
-                                                            : undefined
-                                                    }
-                                                    tooltipPlacement="topRight"
-                                                />
-                                            )}
-                                        </Row>
-                                    </Col>
-                                </Row>
+                                    </div>
+                                    <div className="flex items-center justify-center">
+                                        {variants.length > 1 && (
+                                            <LemonButton
+                                                icon={<IconDelete />}
+                                                status="primary-alt"
+                                                data-attr={`delete-prop-filter-${index}`}
+                                                noPadding
+                                                onClick={() => removeVariant(index)}
+                                                disabledReason={
+                                                    featureFlag.experiment_set && featureFlag.experiment_set?.length > 0
+                                                        ? 'Cannot delete variants from a feature flag that is part of an experiment'
+                                                        : undefined
+                                                }
+                                                tooltipPlacement="topRight"
+                                            />
+                                        )}
+                                    </div>
+                                </div>
                             </Group>
                         ))}
                         {variants.length > 0 && !areVariantRolloutsValid && (
diff --git a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx
index 1282a80c8c9d6..b7f21572aca70 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx
@@ -1,4 +1,4 @@
-import { Row, Col, InputNumber, Select } from 'antd'
+import { InputNumber, Select } from 'antd'
 import { useActions, useValues } from 'kea'
 import { capitalizeFirstLetter, humanFriendlyNumber } from 'lib/utils'
 import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
@@ -75,7 +75,7 @@ export function FeatureFlagReleaseConditions({
 
     const renderReleaseConditionGroup = (group: FeatureFlagGroupType, index: number): JSX.Element => {
         return (
-            <Col span={24} md={24} key={`${index}-${filterGroups.length}`}>
+            <div className="w-full" key={`${index}-${filterGroups.length}`}>
                 {index > 0 && <div className="condition-set-separator">OR</div>}
                 <div className={clsx('mb-4', 'border', 'rounded', 'p-4')}>
                     <div className="flex items-center justify-between">
@@ -314,7 +314,7 @@ export function FeatureFlagReleaseConditions({
                         </>
                     )}
                 </div>
-            </Col>
+            </div>
         )
     }
 
@@ -327,7 +327,7 @@ export function FeatureFlagReleaseConditions({
         const hasMatchingEarlyAccessFeature = featureFlag.features?.find((f: any) => f.flagKey === featureFlag.key)
 
         return (
-            <Col span={24} md={24} key={`${index}-${filterGroups.length}`}>
+            <div className="w-full" key={`${index}-${filterGroups.length}`}>
                 {index > 0 && <div className="condition-set-separator">OR</div>}
                 <div className={clsx('mb-4', 'border', 'rounded', 'p-4', 'FeatureConditionCard--border--highlight')}>
                     <div className="flex items-center justify-between">
@@ -386,7 +386,7 @@ export function FeatureFlagReleaseConditions({
                         </LemonButton>
                     </div>
                 </div>
-            </Col>
+            </div>
         )
     }
 
@@ -456,11 +456,11 @@ export function FeatureFlagReleaseConditions({
                     </div>
                 )}
             </div>
-            <Row className="FeatureConditionCard" gutter={16}>
+            <div className="FeatureConditionCard">
                 {filterGroups.map((group, index) =>
                     isSuper ? renderSuperReleaseConditionGroup(group, index) : renderReleaseConditionGroup(group, index)
                 )}
-            </Row>
+            </div>
             {!readOnly && (
                 <LemonButton type="secondary" className="mt-0 w-max" onClick={addConditionSet} icon={<IconPlus />}>
                     Add condition set