https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js
Can anyone help me understand why the fourth .content <Link/> is not displaying when using the given CSS styling?
Could it be a bug in the code, or am I overlooking something important?
import "./styles.css";
import { Link } from "react-router-dom";
export default function App() {
return (
<div className="App">
<div className="row">
{/* I dont want this div to be a Link */}
<div className="content"></div>
<Link to="/" className="content"></Link>
<Link to="/" className="content"></Link>
<Link to="/" className="content"></Link>
</div>
<div className="row">
<Link to="/" className="content"></Link>
<Link to="/" className="content"></Link>
<Link to="/" className="content"></Link>
<Link to="/" className="content"></Link>
</div>
</div>
);
}.App {
height: 100vh;
width: 100vw;
}
.row:nth-of-type(1) {
height: 500px;
width: 100%;
display: grid;
grid-template-areas:
"a a b c"
"a a d d";
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 20px;
}
.row:nth-of-type(1) > .content:nth-of-type(1) {
grid-area: a;
background-color: orange;
}
.row:nth-of-type(1) > .content:nth-of-type(2) {
grid-area: b;
background-color: blue;
}
.row:nth-of-type(1) > .content:nth-of-type(3) {
grid-area: c;
background-color: green;
}
.row:nth-of-type(1) > .content:nth-of-type(4) {
grid-area: d;
background-color: red;
}https://i.sstatic.net/PZEVw.png
I am specifically seeking insights on why the fourth <Link/> element is not being displayed, rather than alternative approaches to achieve the same outcome. Any help would be greatly appreciated.