Adjust height of label/input in form

user_6769786 0
Viewed 201

I'm attempting to create a layout with 3 forms, whereof I only have 1 form in place. My question is how come the content expands to total height, making the input fields and button to high. This is not visible when having only the "form-1" but I need to add several forms in parallel, so adding only one form does not solve the needs.

Question: How can I set the height to be same as the labels, without setting fixed heights?

.wrapper-for-forms {
  display: grid;
  grid-template:
  'form-1 form-2 form-3' 500px
  /1fr 1fr 1fr;
}

.form-1 {
  display: grid;
  grid-template-columns: 200px 400px;
  grid-gap: 16px;
}

.form-1 {
  margin-top: 10px;
}

label {
  grid-column: 1 / 2;
}

input,
button {
  grid-column: 2 / 3;
}
<div class="wrapper-for-forms">

  <form class="form-1">

    <label for="firstName" class="first-name">First Name</label>
    <input id="firstName" type="text">

    <label for="lastName" class="last-name">Last Name</label>
    <input id="lastName" type="text">

    <button>Submit</button>

  </form>

  <div class="form-2">Form-2</div>
  <div class="form-3">Form-3</div> 

</div>

css-grid css html
1 Answers

You can simply change this line grid-template:'form-1 form-2 form-3' 500px /1fr 1fr 1fr to grid-template:'form-1 form-2 form-3' 500px repeat(3, 1fr); or remove 500px so it will look like grid-template:'form-1 form-2 form-3' repeat(3, 1fr); 

.wrapper-for-forms {
  display: grid;
  grid-template: 'form-1 form-2 form-3' 500px repeat(3, 1fr);
}

.form-1 {
  display: grid;
  grid-template-columns: 200px 400px;
  grid-gap: 16px;
}

.form-1 {
  margin-top: 10px;
}

label {
  grid-column: 1 / 2;
}

input,
button {
  grid-column: 2 / 3;
}
<div class="wrapper-for-forms">

  <form class="form-1">

    <label for="firstName" class="first-name">First Name</label>
    <input id="firstName" type="text">

    <label for="lastName" class="last-name">Last Name</label>
    <input id="lastName" type="text">

    <button>Submit</button>

  </form>

  <div class="form-2">Form-2</div>
  <div class="form-3">Form-3</div>

</div>

and if you want to change the direction you can simply change the above to grid-template:'form-1 form-2 form-3';

.wrapper-for-forms {
  display: grid;
  grid-template: 'form-1 form-2 form-3';
}

.form-1 {
  display: grid;
  grid-template-columns: 200px 400px;
  grid-gap: 16px;
}

.form-1 {
  margin-top: 10px;
}

label {
  grid-column: 1 / 2;
}

input,
button {
  grid-column: 2 / 3;
}
<div class="wrapper-for-forms">

  <form class="form-1">

    <label for="firstName" class="first-name">First Name</label>
    <input id="firstName" type="text">

    <label for="lastName" class="last-name">Last Name</label>
    <input id="lastName" type="text">

    <button>Submit</button>

  </form>

  <div class="form-2">Form-2</div>
  <div class="form-3">Form-3</div>

</div>

user_135368930
Related