Search code examples
htmlcsscss-grid

Using CSS grid layout, how to move the "checkbox" beside husk passord?

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>

Solution

  • 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

    enter image description here

    .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:

    • Move grid div inside form
    • Surround label and checkbox in div

    Lykke til!