I am building a React component with a grid layout, and I’m having trouble centering the entire grid within its container. I am using Flexbox for the layout, but the grid items aren’t centering properly.
Here’s the setup:
1. I have a container that should center its children both horizontally and vertically.
2. Inside the container, I am rendering three cards that should be displayed in a responsive grid.
Here is my code:
import React from 'react';
import Section from './Section';
import ClipPath from './ClipPath';
import Arrow from './Arrow';
import BluetoothScannerIllustration from './Svg';
const About = () => {
return (
<Section crosses>
<div className="container mx-auto max-w-6xl px-4">
{/* Heading */}
<h1 className="gradientText lg:text-6xl text-center text-5xl font-[500] text-white font-inter">
We've Noticed A{' '}
<span className="bg-gradient-to-r from-rose-400 to-red-500 bg-clip-text text-transparent">
Major
</span>{' '}
Problem.
</h1>
<p className="text-n-4 font-inter text-xl sm:text-lg md:text-xl lg:text-xl text-center max-w-2xl mx-auto mt-5">
Transportation hubs are overcrowded,
<br className="block lg:hidden" />
<span className="hidden lg:inline-block"> making people late and frustrated.</span> It's time for a smarter
solution.
</p>
<div className="flex -mt-10 justify-center">
<BluetoothScannerIllustration />
</div>
<div className="mt-12 max-w-6xl !mx-auto flex justify-center">
<div className="grid grid-cols-1 items-center md:grid-cols-2 lg:grid-cols-3 gap-6 mx-auto justify-center">
<div
className="relative items-center p-0.5 bg-no-repeat bg-[length:100%_100%] md:max-w-[24rem] w-full"
style={{
backgroundImage: `url('data:image/svg+xml;utf8,${encodeURIComponent(`
<svg preserveAspectRatio="none" width="384" height="366" viewBox="0 0 384 366" fill="none" xmlns="http://www.w3.org/2000/svg">
<path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="white" stroke-opacity="0.15" stroke-width="2"/>
<path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="url(#paint0_linear_333_9188)" stroke-opacity="0.85" stroke-width="2"/>
<defs>
<linearGradient id="paint0_linear_333_9188" x1="192" y1="0" x2="192" y2="366" gradientUnits="userSpaceOnUse">
<stop stop-color="#33CEFF"/>
<stop offset="0.562842" stop-color="#D633FF" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
`)}')`,
}}
>
<div className="relative z-2 font-inter flex flex-col min-h-[22rem] p-[2.4rem]">
<h5 className="text-2xl text-white mb-5">The Problem</h5>
<p className="mb-6 text-n-3">
Overcrowded transit areas, combined with inadequate infrastructure and poor planning, result in persistent delays that affect daily commuters and logistics.
</p>
<div className="flex items-center mt-auto">
<a
target="_blank"
rel="noopener noreferrer"
href="https://psychcentral.com/adhd/why-are-people-with-adhd-always-late"
className="ml-auto font-code text-xs font-bold text-n-1 uppercase tracking-wider"
>
Explore more
</a>
<Arrow />
</div>
</div>
<ClipPath />
</div>
{/* Solution Card */}
<div
className="relative p-0.5 bg-no-repeat bg-[length:100%_100%] md:max-w-[24rem] w-full"
style={{
backgroundImage: `url('data:image/svg+xml;utf8,${encodeURIComponent(`
<svg preserveAspectRatio="none" width="384" height="366" viewBox="0 0 384 366" fill="none" xmlns="http://www.w3.org/2000/svg">
<path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="white" stroke-opacity="0.15" stroke-width="2"/>
<path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="url(#paint0_linear_333_9188)" stroke-opacity="0.85" stroke-width="2"/>
<defs>
<linearGradient id="paint0_linear_333_9188" x1="192" y1="0" x2="192" y2="366" gradientUnits="userSpaceOnUse">
<stop stop-color="#33CEFF"/>
<stop offset="0.562842" stop-color="#D633FF" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
`)}')`,
}}
>
<div className="relative z-2 font-inter flex flex-col min-h-[22rem] p-[2.4rem]">
<h5 className="text-2xl text-white mb-5">The Solution</h5>
<p className="mb-6 text-n-3">
By using advanced analytics and IoT-enabled devices, we can optimize the flow of people and goods, reducing congestion and delays.
</p>
<div className="flex items-center mt-auto">
<a
target="_blank"
rel="noopener noreferrer"
href="https://example.com/solution"
className="ml-auto font-code text-xs font-bold text-n-1 uppercase tracking-wider"
>
Learn More
</a>
<Arrow />
</div>
</div>
<ClipPath />
</div>
{/* Impact Card */}
<div
className="relative p-0.5 bg-no-repeat bg-[length:100%_100%] md:col-span-2 w-full"
style={{
backgroundImage: `url('data:image/svg+xml;utf8,${encodeURIComponent(`
<svg preserveAspectRatio="none" width="384" height="366" viewBox="0 0 384 366" fill="none" xmlns="http://www.w3.org/2000/svg">
<path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="white" stroke-opacity="0.15" stroke-width="2"/>
<path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="url(#paint0_linear_333_9188)" stroke-opacity="0.85" stroke-width="2"/>
<defs>
<linearGradient id="paint0_linear_333_9188" x1="192" y1="0" x2="192" y2="366" gradientUnits="userSpaceOnUse">
<stop stop-color="#33CEFF"/>
<stop offset="0.562842" stop-color="#D633FF" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
`)}')`,
}}
>
<div className="relative z-2 font-inter flex flex-col min-h-[22rem] p-[2.4rem]">
<h5 className="text-2xl text-white mb-5">The Impact</h5>
<p className="mb-6 text-n-3">
Enhanced transportation efficiency can lead to reduced emissions, improved commuter satisfaction, and economic growth.
</p>
<div className="flex items-center mt-auto">
<a
target="_blank"
rel="noopener noreferrer"
href="https://example.com/impact"
className="ml-auto font-code text-xs font-bold text-n-1 uppercase tracking-wider"
>
Discover Impact
</a>
<Arrow />
</div>
</div>
<ClipPath />
</div>
</div>
</div>
</div>
</Section>
);
};
export default About;
Here is how it currently looks like:https://ibb.co/hFScmDX
Thank you!