grid fill div

Question

I have a page where there is a part with questions, I needed to put the textfield filling the frame and the button in the bottom right corner of the page, but for that I would need to fill the grid until the end of the div, I tried everything and I can not make the grid fill, it merely accompanies the text

.grid {
  margin-top: 0.5%;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
 
  grid-gap: 7px;
  margin-left: 7%;
  margin-right: 7%;
  font-size: 50px !important;
  
  
}

.grid > div {
  background: rgb(70, 70, 70);
  color:white;
  border-radius: 1px;
  padding:5%;
justify-content: center;
align-content: start;
font-size: 27%;



}

.grid2{
display:grid;
grid-template-columns: 20% 80%;
padding: 100%;
column-gap: 3%;
justify-content: center;


}


.titulo{
  font-size: 120%;
font-weight: bold;
margin-bottom: 2%;

}
.logo-forum{
border-radius: 50%;
width:50px;
height: 50px;
overflow: hidden;
position: relative;
}
.logo-forum img {
  border-color: white;
  border: 10px;
  background-color: rgb(82, 82, 82);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 110%;
  
}

.form1{
  width: max-content;
  height: max-content;
}

.form-btn{
  

  justify-self: end;
}
.fit{

  height:100%;
}

#botao {
  border-radius: 50px;
  width: 110%;
  height: 0,5%;
  padding-top: 1%;
  padding-bottom: 1%;
  
  border-color: rgba(238, 238, 238, 0.377);
  align-items: center;
  background-color: white;
  display: flex;
   justify-content: center;
   align-items: center;
  
 /* font-weight: 500; */
}

<aside>
        <div class="container-fluid corpo">
            <section class="grid">

                <div class="grid2">

                    <div >
                        <div class="logo-forum"><img src="../views/img/Perguntas/Logo1.png"></div>
                        <div></div>
                    </div>
                    <div>
                        <div class="titulo"> Nome</div>
                        <div>Omnis quam itaque temporibus vel, magni a doloribus delectus ipsa. Reiciendis tenetur,
                            alias excepturi fuga nisi cumque maxime repellendus fugit mollitia rem voluptate, incidunt
                            voluptatum perspiciatis. Fuga, deserunt repellat? Explicabo.</div>

                    </div>

                </div>
                <div class="grid2">
                    <div>
                        <div class="logo-forum"><img src="../views/img/Perguntas/Logo1.png"></div>
                        <div></div>
                    </div>
                    <div>
                        <div class="titulo"> Nome</div>
                        <div>Omnis quam itaque temporibus vel, magni a dol</div>
                        <div class="form1">
                            <form>
                                <div>
                                    <input type="text" class="text-field">
                                </div>
                                <div class="form-btn">
                                    <input type="button" value="" id="botao">
                                </div>

                            </form>
                        </div>
                    </div>

                </div>

            </section>


        </div>


    </aside>

Does anyone know how I can get the grid div to fill the board? I need this urgent and nn know more what to do

I’ve tried to use align and Justify, position, and nothing works

Answer 1

Face in class .grid > div {} you stated explicitly align-content: start; should be the value default to occupy the entire line align-content: stretch;...

But since you’ve declared start, another way to correct is by placing a value of row to the grid, using grid-template-rows: 1fr; as I did below

.grid {
  margin-top: 0.5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  grid-gap: 7px;
  margin-left: 7%;
  margin-right: 7%;
  font-size: 50px !important;


}

.grid > div {
  background: rgb(70, 70, 70);
  color: white;
  border-radius: 1px;
  padding: 5%;
  justify-content: center;
  align-content: start;
  font-size: 27%;

  grid-template-rows: 1fr;

}

.grid2 {
  display: grid;
  grid-template-columns: 20% 80%;
  padding: 100%;
  column-gap: 3%;
  justify-content: center;


}


.titulo {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 2%;

}

.logo-forum {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  overflow: hidden;
  position: relative;
}

.logo-forum img {
  border-color: white;
  border: 10px;
  background-color: rgb(82, 82, 82);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 110%;

}

.form1 {
  width: max-content;
  height: max-content;
}

.form-btn {


  justify-self: end;
}

.fit {

  height: 100%;
}

#botao {
  border-radius: 50px;
  width: 110%;
  height: 0, 5%;
  padding-top: 1%;
  padding-bottom: 1%;

  border-color: rgba(238, 238, 238, 0.377);
  align-items: center;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  /* font-weight: 500; */
}

<aside>
    <div class="container-fluid corpo">
      <section class="grid">

        <div class="grid2">

          <div>
            <div class="logo-forum"><img src="../views/img/Perguntas/Logo1.png"></div>
            <div></div>
          </div>
          <div>
            <div class="titulo"> Nome</div>
            <div>Omnis quam itaque temporibus vel, magni a doloribus delectus ipsa. Reiciendis tenetur,
              alias excepturi fuga nisi cumque maxime repellendus fugit mollitia rem voluptate, incidunt
              voluptatum perspiciatis. Fuga, deserunt repellat? Explicabo.</div>

          </div>

        </div>
        <div class="grid2">
          <div>
            <div class="logo-forum"><img src="../views/img/Perguntas/Logo1.png"></div>
            <div></div>
          </div>
          <div>
            <div class="titulo"> Nome</div>
            <div>Omnis quam itaque temporibus vel, magni a dol</div>
            <div class="form1">
              <form>
                <div>
                  <input type="text" class="text-field">
                </div>
                <div class="form-btn">
                  <input type="button" value="" id="botao">
                </div>

              </form>
            </div>
          </div>

        </div>

      </section>


    </div>


  </aside>