Matching flex distance for heading of table and content - css

Question

I have a table with heading and entries under it.
I want the heading and entries aligned with each other.
Table.jsx:
<div className="home-trending">
<h1 className="home-trending-heading"> CRYPTO TRENDING ON DEX</h1>
<div className="cex-trending-data">
<div className="dex-content-heading bold">
<p className="cex-content-heading-item">Chain</p>
<p className="cex-content-heading-item">Token Amount (out)</p>
<p className="cex-content-heading-item">Token Amount (in)</p>
<p className="cex-content-heading-item">TXN Value</p>
<p className="cex-content-heading-item">Wallet Type</p>
<p className="cex-content-heading-item">Time</p>
<p className="cex-content-heading-item">Twitter</p>
</div>
{topDEXTrades.slice(0, 10).map((trade) => {
return (
<TrendingDexRows
chain={trade.chain_name}
time={trade.trade_time}
token_out={trade.token_out}
token_in={trade.token_in}
trade_id={trade.id}
symbol_out={trade.symbol_out}
symbol_in={trade.symbol_in}
value={trade.txn_value}
hash={trade.txn_hash}
wallet={trade.wallet}
category={trade.category}
timeToGo={timeToGoSec}
href={twitterHref}
detailedView={true}
view="large"
/>
);
})}
</div>
</div>
Table.css:
.dex-content-heading {
display: flex;
justify-content: space-between;
}
Rows.jsx:
<div>
<div className="cex-trending-row">
<div className="cex-trending-row-name row-item">
<img
src={chainIcon(props.chain)}
alt="btc"
className="base-asset-img"
/>
<p className="trending-symbol">{props.chain}</p>
</div>
<p className="row-item bold">{millify(props.token_out)}</p>
<p className="row-item bold">{millify(props.token_in)}</p>
<p className="row-item bold">{millify(props.value)}</p>
<p className="row-item" style={categoryStyle(props.category)}>
{categoryName(props.category)}
</p>
<p className="row-item"> {props.timeToGo(props.time)}</p>
<div>
<a
href={props.href(
props.value,
props.token_out,
props.token_in,
props.chain,
props.symbol_out,
props.symbol_in
)}
target="_blank"
rel="noreferrer"
style={{ textDecoration: "none", paddingRight: "25px" }}
>
<img
src={Twitter}
alt="twitter"
className="graph-icon-img-dex"
style={{ marginLeft: "10px" }}
/>
</a>
</div>
</div>
<hr className="horrizontal-line" />
</div>
Row.css:
.cex-trending-row {
display: flex;
}
.row-item {
flex: 1;
}
The heading and the rows are not aligned with each other. How do I make sure they are perfectly aligned? Which flex property can be used to make sure both divs have the same amount of space between the items of the div?

Answer 1

Here's an example of using grid with React.
const App = () => {
const headingData = [
"Chain",
"Token",
"Title 3",
"EzPz",
];
const dataArr = [
{ chain: "curve", token: "4m", foo: "bar", lemon: "squeezy" },
{ chain: "bird", token: "5m", foo: "tar", lemon: "teasy" },
{ chain: "lard", token: "1m", foo: "guitar", lemon: "jeezy" },
{ chain: "hard", token: "20k", foo: "blar", lemon: "measly" },
{ chain: "charged", token: "ayyyy", foo: "mars", lemon: "⚰" },
];
return (
<div className="myGrid">
{
headingData.map(str => <div key={"head-" + str}>{str}</div>)
}
{
dataArr.map((o,i) => [
<div key={"data-chain-"+i}>{o.chain}</div>,
<div key={"data-token-"+i}>{o.token}</div>,
<div key={"data-foo-"+i}>{o.foo}</div>,
<div key={"data-lemon-"+i}>{o.lemon}</div>,
])
}
</div>
);
};
ReactDOM.createRoot(
document.getElementById("root")
).render(
<App />
);
.myGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>