Question 46142 in CSS Question posted in
Some basic documentation can be found here.

textarea not filling div in css

I’m trying to fit the textarea "todo" in the div "box_3" but unfortunately it’s looking like in the picture and I’m not able to find the error. I assume it has to do with the size of box_3 and the display: grid but I can’t solve it.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container_index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 41vh 41vh;
}

.box_1 {
    background-color: blue;
    grid-column: 1 / 3;
    grid-row: 1 / 2;


}

.box_2 {
    background-color: green;
    grid-column: 1 / 3 ;
    grid-row: 2 / -2;


}

.box_3 {
    display: grid;
    grid-row: 3 / -3;
    grid-column: auto;
    background-color: white;
    place-content: start center;
    background-color: red;

}

.todo {
    width: 100%;
    height: 100%;
    resize: none;
    border: 2px solid blue;
}
<main>
    <div class="container_index">
        <div class="box_1"><h2>Test</h2></div>
        <div class="box_2"><h2>Test</h2></div>
        <div class="box_3">
            <textarea class="todo"></textarea>
        </div>
    </div>
</main>

This is how it looks

I tried to change the css multiple times without results

Tags:

3

Answers


  1. 0

    You only need to remove display: grid; from the parent (.box_3)

    Or just remove place-content: start center;

    More info about place-content

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container_index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 41vh 41vh;
}

.box_1 {
    background-color: blue;
    grid-column: 1 / 3;
    grid-row: 1 / 2;


}

.box_2 {
    background-color: green;
    grid-column: 1 / 3 ;
    grid-row: 2 / -2;


}

.box_3 {
    grid-row: 3 / -3;
    grid-column: auto;
    background-color: white;
    place-content: start center;
    background-color: red;

}

.todo {
    width: 100%;
    height: 100%;
    resize: none;
    border: 2px solid blue;
}
    <main>
    <div class="container_index">
        <div class="box_1"><h2>Test</h2></div>
        <div class="box_2"><h2>Test</h2></div>
        <div class="box_3">
            <textarea class="todo"></textarea>
        </div>
    </div>
</main>
    Login or Signup to reply.
  2. 0

    Just remove place-contnet: start center; property from .box_3 so that the textarea will cover while 3rd box div

     .container_index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50vh 50vh;
}

.box_3 {
    display: grid;
    grid-row: 3 / -3;
    grid-column: auto;
    /* background-color: white; */
    /* place-content: start center; */
    background-color: red;
}
    Login or Signup to reply.
  3. 0

    Removing the place-content property makes the textarea take the whole space in the container for me. As stated in a previous reply, unless you want to align other elements in box_3, you can remove the display: grid as well.

    .box_3 {
    display: grid;
    grid-row: 3 / -3;
    grid-column: auto;
    background-color: white;
    /* place-content: start center; */
    background-color: red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search