Grid system – gap between rows & columns doesn’t work when I add inner input in same size

The problem was the default input rules – padding: 1px 2px;. Right here:

input[type="text" i] {
    padding: 1px 2px;
}

I overridden this rule by setting the value to 0 – padding: 0; And also, in order to include the values of the margins and borders of the width and height of the input, I added box-sizing: border-box;.

As a result, the problem was solved with two lines of css rules (for the selector .formOuter > .form > label > input):

padding: 0;
box-sizing: border-box;

.formOuter > .form {
  padding: 12px 25% 10px 25%;
  display: grid;
  grid-template-areas: "grid-1 grid-2" "grid-3 grid-3" "grid-4 grid-4";
  grid-gap: 6px;
}

.formOuter > .form > .grid-1,
.formOuter > .form > .grid-2,
.formOuter > .form > .grid-3 {
  position: relative;
  height: 40px;
}

.formOuter > .form > label > input {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  
  padding: 0;
  box-sizing: border-box;
}

.formOuter>.form>.grid-1 {
  grid-area: grid-1;
}

.formOuter>.form>.grid-2 {
  grid-area: grid-2;
}

.formOuter>.form>.grid-3 {
  grid-area: grid-3;
}

.formOuter>.form>.grid-4 {
  grid-area: grid-4;
}
<div class="formOuter">

        <div class="form">

          <label class="grid-1">
            <input type="text">
          </label>

          <label class="grid-2">
            <input type="text">
          </label>

          <label class="grid-3">
            <input type="text">
          </label>

          <input type="submit" class="grid-4">

        </div>

</div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top