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

user_13012400 0
Viewed 88

Grid system - gap between rows & columns doesn't work when I add inner input in same size.

When I create grid system and add some gap between them and inside add input with

height: 100%;
width: 100%;

it take all entire size without gap size it should be smaller and don't take extra size from gap

.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;
}

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

css-grid css html
1 Answers

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>

user_135734440
Related