REMINDER: Check out and customize the code in CodeSandbox.
This is a parent component with 5 children elements. Among them, 3 are React components and the remaining 2 are regular HTML buttons:
import "./App.css";
import React from "react";
import FormField from "./FormField";
export default function App() {
return (
<form className="Form">
<FormField className="name" title="Name" type="text" isRequired={true} />
<FormField className="salary" title="Salary" isRequired={true} />
<FormField className="age" title="Age" type="text" isRequired={true} />
<button className="submit">Submit</button>
<button className="update">Update</button>
</form>
);
}
The CSS styling for the parent (App.css) includes the grid-template-area property as shown below:
.Form {
display: grid;
grid-template-areas:
"name name"
"salary salary"
"age age"
"submit update";
gap: 20px;
}
.name {
grid-area: name;
}
.salary {
grid-area: salary;
}
.age {
grid-area: age;
}
.submit {
grid-area: submit;
}
.update {
grid-area: update;
}
Expected layout based on grid areas:
https://i.sstatic.net/WJ9QR.png
Actual output differs:
https://i.sstatic.net/5253y.png
What could be causing the issue that doesn't align my grid with the specified areas?