textarea not filling div in css

March 5, 2023

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

>Solution :

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>