0

I'm fairly new to CSS grid. I made a simple contact form to experiment with the system. My grid has 2 columns and 5 rows. I placed 4 inputs in the left column, 1 textarea in the right column and one last input in the last row. The textarea can be resized vertically.

The problem is that dragging the textarea downward resizes all the rows in the grid, including rows in adjacent columns, consequently changing the overall layout (see snippet example below). It seems to be a normal and logical behavior to me but I was wondering if there's any way to stop rows in other columns from resizing using grid directly.

* {
    box-sizing: border-box;
}

html, body, input, textarea {
    padding: 0;
    margin: 0;
}

.form {
    margin: 10px;
    display: grid;
    grid-template: repeat(5, auto) / 4fr 6fr;
    grid-gap: 10px;
    grid-template-areas:
        ". textarea"
        ". textarea"
        ". textarea"
        ". textarea"
        "submit submit";
}

.input, .submit {
    height: 30px;
}

.submit {
    grid-area: submit;
}

.textarea {
    grid-area: textarea;
    resize: vertical;
    min-height: 150px;
}
<form class="form">
    <input class="input" type="text" />
    <input class="input" type="text" />
    <input class="input" type="text" />
    <input class="input" type="text" />
    <textarea class="textarea" name="message"></textarea>
    <input class="submit" type="submit" />
</form>

So far the most straightforward solution I've found to get around this issue is to wrap the first 4 inputs inside a div (say with class="container") and set a fixed height to it, like so:

.container {
    grid-area: container;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150px;
}

It works but I don't find it very convenient.

Is there any work around to this problem using grid directly?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Junitar
  • 905
  • 6
  • 13
  • set max-height to textarea – Ehsan Aug 18 '20 at 13:58
  • But I want to be able to resize the `textarea`. – Junitar Aug 18 '20 at 13:59
  • 1
    I think your straightforward solution would be the simplest one: that is because you don't want the individual row heights to be distributed throughout: that means you will need to lump all your inputs in a single div instead. So, see it as a two column layout that has 2 rows: 1st row has 4 inputs on the left, textarea on the right; 2nd row has the submit button as per your design. – Terry Aug 18 '20 at 13:59
  • @Terry Yes, that's what I did for the moment. Fixed height container for the `input`s in a 2 x 2 grid. I just don't find it very convenient, especially when dealing with more complicated designs. It would simply be easier to freeze the rows where the `textarea` is. – Junitar Aug 18 '20 at 14:03
  • Let me to say you something; In real world, resizing textarea is not usual and usefull. I think max-height is the only way. Dont waste your time. – Ehsan Aug 18 '20 at 16:28
  • 1
    @ehsan That's a bit of a naive opinion. Resizeable textarea is great for usability, especially when somebody is typing out a long paragraph of text and don't want to scroll excessively to eyeball everything. – Terry Aug 19 '20 at 07:36
  • as user up to now i never resize textarea.maybe i'm wrong. – Ehsan Aug 19 '20 at 07:40

1 Answers1

1

See this: Prevent content from expanding grid items

Back to your question, yes, you've defined an area 'textarea' and then pinned your textarea to it.

The textarea AREA is pinned to the grid object The textarea element is pinned to the AREA When the textarea grows, it grows the grid, and thus, the rows for the inputs grow too.

enter image description here

It seems to me that one sensible way to allow you to grow your textarea whilst keeping your inputs in check would be to add another layer to your structure, simply the logic of the grid container, and combine it with flex to achieve the desired result. You could replace the flex container for yet another grid broken down by 1 column and auto rows but I don't see what the practicality of that would be. In any case, as a reference:

enter image description here

https://codepen.io/Capagris/pen/NWNrJoZ

HTML:

<form class="form">
    <div class="wrap">
      <input class="input" type="text" />
      <input class="input" type="text" />
      <input class="input" type="text" />
      <input class="input" type="text" />
      <input class="submit" type="submit" />
    </div>
    <textarea class="textarea" name="message"></textarea>
    
</form>

CSS:

* {
    box-sizing: border-box;
}

html, body, input, textarea {
    padding: 0;
    margin: 0;
}

.form {
    margin: 10px;
    display: grid;
    grid-template: repeat(5, auto) / 4fr 6fr;
    grid-gap: 10px;
    grid-template-areas:
        ". textarea"
        ". textarea"
        ". textarea"
        ". textarea"
        "submit submit";
}

.input, .submit {
    height: 30px;
    margin-bottom: 20px;
    width: 100%;
}

.submit {
    /*grid-area: submit;*/
}

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.textarea {
    /*grid-area: textarea;*/
    resize: vertical;
    min-height: 150px;
}
Capagris
  • 3,811
  • 5
  • 30
  • 44
  • Thank you for your input. I don't see any benefit of using your solution over my current work around though. What you propose changes the design while not simplifying the fix. – Junitar Aug 18 '20 at 15:23