Question 172686 in Html Question posted in
Some basic documentation can be found here.

Why does the HTML input tag move the CSS grid line unexpectedly?

To make my problem simplified, just assume I have a 2×2 CSS grid div. I used grid template to adjust 3 div (with class names: "btn", "title", and "info") in these 4 cells as below snippet code. (2 columns in the second row are merged to keep 3rd div class="info")

The first div (class="btn") has an aspect ratio of 1/1. so I just set its height to 10vh and it becomes a square.

My Problem

The problem is "input" tag inside last div class="info".
If I do not have the input tag, everything works as expected. the middle grid line respects the min-content of the first column (as it is set in grid-template-columns) and keep to the most left position.

But if I use that input tag inside the last div, it would move the grid middle line unexpectedly! It is unexpected because the 2nd row of the grid has enough space for it and I think it should not be moved.

To see the problem just remove the input tag from the below snippet and see the difference.

div.contain {
  display: grid;
  grid-template-rows: fit-content(20%) 45%;
  grid-template-columns: min-content auto;
  grid-template-areas:
        "btn title"
        "info info";
  gap: 10px;
}

.btn {
   grid-area: btn;
   aspect-ratio: 1 / 1;
   height: 10vh;
   border: 1px solid;
   
}

.title {
   grid-area: title; 
   border: 1px solid;
}

.info {
  border: 1px solid;
  grid-area: info;
}
<div class="contain">
  <div class="btn">Btn</div>
  <div class="title">Title</div>
  <div class="info">
    Normal Text
    <div>another div</div>
    <input>
  </div>  
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer,

    Should set the input tag width value. I set it to any percentage and its works fine

    input {
  width: 50%;
}

  2. 0

    Just add align-self: start to info class

    div.contain {
  display: grid;
  grid-template-rows: fit-content(20%) 45%;
  grid-template-columns: min-content auto;
  grid-template-areas:
        "btn title"
        "info info";
  gap: 10px;
}

.btn {
   grid-area: btn;
   aspect-ratio: 1 / 1;
   height: 10vh;
   border: 1px solid;
   
}

.title {
   grid-area: title; 
   border: 1px solid;
}

.info {
  border: 1px solid;
  grid-area: info;
  align-self: start; 
  padding:2px
}
    <div class="contain">
  <div class="btn">Btn</div>
  <div class="title">Title</div>
  <div class="info">
    Normal Text
    <div>another div</div>
    <input>
  </div>  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search