I am diving into the world of CSS Grid and attempting to create a sign-up page similar to that of Facebook.
The layout I have in mind involves placing the first name and last name on one line, the email address on another line, and a submit button on a third line. The challenge is to make the email field span across columns.
Here's a snippet of my HTML and CSS code:
<!DOCTYPE HTML>
<title> Crafting JavaScript Form Validation with a Hint of CSS Grid </title>
<style>
html,body{
height : 100%;
}
body{
display : flex;
display : -webkit-flex;
display : -moz-flex;
justify-content : center;
align-items : center;
}
form{
display : grid;
grid-columns : 200px 1% 200px;
grid-rows : auto 1% auto 1% auto;
border : 1px solid black;
}
#fname{
grid-column : 1;
grid-row : 1;
}
#lname{
grid-column : 3;
grid-row : 1;
}
#email{
grid-row : 2;
grid-column-span : 3;
}
#submit{
grid-row : 3;
grid-column-span : 3;
}
</style>
<body>
<form>
<input type="text" name="fname" id="fname" required="true" placeholder="First Name"/>
<input type="text" name="lname" id="lname" required="true" placeholder="Last Name"/>
<input type="email" name="email" id="email" required="true" placeholder="Email"/>
<button id="submit">Submit</button>
</form>
</body>
This setup yields an output of:
I'm open to constructive criticism!:What improvements can be made?