grid.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.outsidegrid {
  height: 100%;
  width: 40rem;
  margin: 0 auto;
  display: grid;
  grid-template-areas:
  'header header'
  'article article'
  'outsidegridcellrepeatone outsidegridcellrepeattwo'
  'outsidegridcellrepeatthree outsidegridcellrepeatfour'
  'floatdepositname floatdepositname'
  'notes notes'
  'submitt submitt';
}
.header{
  grid-area: header;
}
.article{
  grid-area: article;
}
.outsidegridcellrepeatone{
  grid-area: outsidegridcellrepeatone;
}
.outsidegridcellrepeattwo{
  grid-area: outsidegridcellrepeattwo;
}
.outsidegridcellrepeatthree{
  grid-area: outsidegridcellrepeatthree;
}
.outsidegridcellrepeatfour{
  grid-area: outsidegridcellrepeatfour;
}
.floatdepositname{
  grid-area: floatdepositname;
}
.notes{
  grid-area: notes;
}
.submitt{
  grid-area: submitt;
}

/* .outsidegrid, .article, .floatdepositname, .header, .notes, .outsidegridcellrepeatfour, .outsidegridcellrepeatone, .outsidegridcellrepeatthree, .outsidegridcellrepeattwo, .submitt{
  border: 2px solid;
} */

.grid{
  width: 17.5rem;
  height: 25rem;
  margin: 0 auto;
  align-self: center;
  justify-self: center;
  justify-content: center;
  align-items: center;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(16, 1fr);
  grid-row-gap: 0.0625rem;
  grid-column-gap: 0.0625rem;
  margin: 0;
  padding: 0;
}

div.outsidegrid > header {
  grid-column: 1 / span 2;
  height: 3rem;
  text-align: center;
}
div.outsidegrid > article {
  grid-column: 1 / span 2;
  height: 7rem;
}
div.outsidegrid > div.outsidegridcellrepeatone, div.outsidegrid > div.outsidegridcellrepeattwo, div.outsidegrid > div.outsidegridcellrepeatthree, div.outsidegrid > div.outsidegridcellrepeatfour{
  height: 25rem;
  width: 100%;
  }
div.outsidegrid > section.floatdepositname{
  grid-column: 1 / span 2;
  height: 6rem;
  /* padding: 0.9rem; */
  line-height: 2rem;
}
div.outsidegrid > section.notes{
  grid-column: 1 / span 2;
  height: 10rem;
}
div.outsidegrid > section.submit{
  grid-column: 1 / span 2;
  height: 2.5rem;
}

div.grid > div.cell, div.grid > div.cellotherouter, div.grid > div.cellotherinner
 {
  height: 1.5rem;
}

.title{
  grid-column: 1 / span 3;
  grid-row: 1;
  height: 1.43rem;
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
}
div.cellotherouter{
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}
div.cellotherinner{
  width: 2.4rem;
  height: 1.4rem;
}

div.cellotherinner > input{
  width: 2rem;
}

div.cell > input{
  width: 5rem;
}

div.grid > div.cell.label{
  font-weight: 900;
  text-align: center;
  font-size: 0.85rem;
}

div.grid > div.cell > input, div.cellotherinner > input, div.outsidegrid > section.floatdepositname > input, div.outsidegrid > section.notes > div.align > textarea{
  border-radius: 4px;
  border: 2px solid rgb(172, 172, 172);
  outline-color: rgb(172, 172, 172);
}

div.outsidegrid > section.notes > div.align {
  text-align: center;
}

div.outsidegrid > section.notes > div.spacing, div.outsidegrid > section.submit{
  margin-left: 1.2rem;
}

div.outsidegrid > section.submit > input {
  display: inline-block;
  padding: 5px 10px;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #000000;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px rgb(134, 134, 134);
}

div.outsidegrid > section.submit > input:hover {background-color: #313131}

div.outsidegrid > section.submit > input:active {
  background-color: #000000;
  box-shadow: 0 5px rgb(182, 182, 182);
  transform: translateY(4px);
}

.floatdepositname{
  display:grid;
  place-items: center;
}

@media (max-width: 500px){
  .outsidegrid{
    width: 100%;
    grid-template-areas:
  'header header'
  'article article'
  'outsidegridcellrepeatone outsidegridcellrepeatone'
  'outsidegridcellrepeattwo outsidegridcellrepeattwo'
  'outsidegridcellrepeatthree outsidegridcellrepeatthree'
  'outsidegridcellrepeatfour outsidegridcellrepeatfour'
  'floatdepositname floatdepositname'
  'notes notes'
  'submitt submitt';
  }

  section.notes > div.align > textarea {
    width: 30rem;
  }
  div.outsidegrid > div.outsidegridcellrepeatone, div.outsidegrid > div.outsidegridcellrepeattwo, div.outsidegrid > div.outsidegridcellrepeatthree, div.outsidegrid > div.outsidegridcellrepeatfour{
    display: grid;
    place-items: center;
  }
  
  span.float, span.name, span.deposit{
    display: table-row;
  }

  span lable input[type="text"] {
      display: table-cell;
      align-items: right;
    }
}