Menu
I am new to programming (learning using online courses)
I am just testing and getting a "feel" for CSS, I have now used 2 days trying to understand CSS grid, but I am stuck trying to solve this little problem.
First of, there are different ways to make a layout with CSS, are there a recommended ways? is grid the way to go, or flex?
I am trying to make the design for my login form for one of my projects, I am almost there but I cannot figure out how to move the checkbox from one column to the other.
Picture show what I mean.
my HTML:
.grid-container {
display: grid;
padding: 1em;
justify-content: center;
align-content: center;
}
form {
background: #2DA1A8;
padding: 2em;
display: grid;
grid-template-columns: auto auto;
}<body>
<div class="grid-container">
<form action="">
<label for="username" class="user-name">Brukernavn</label>
<input type="text" class="username">
<label for="password" class="pass-word">Passord</label>
<input type="password" class="password">
<button class="login">Logg inn</button>
<label for="rpass" class="rem-pass">Husk passord</label>
<input type="checkbox" class="remember">
<label for="fpass" class="forgot">Glemt <a href="#">passord?</a></label>
</form>
</div>
</body>
562
Put a <div> around your checkbox and label:
For future reference, I strongly suggest you checkout this video by firebase: https://www.youtube.com/watch?v=uuOXPWCh-6o
.grid-container {
display: grid;
padding: 1em;
justify-content: center;
align-content: center;
}
form {
background: #2da1a8;
padding: 2em;
display: grid;
grid-template-columns: auto auto;
} <form action="">
<div class="grid-container">
<label for="username" class="user-name">Brukernavn</label>
<input type="text" class="username">
<label for="password" class="pass-word">Passord</label>
<input type="password" class="password">
<button class="login">Logg inn</button>
<div>
<label for="rpass" class="rem-pass">Husk passord</label>
<input type="checkbox" class="remember">
</div>
<label for="fpass" class="forgot">Glemt <a href="#">passord?</a></label>
</div>
</form>The only changes made were:
Lykke til!
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
