How do I make one element in a CSS-Grid not determine the size of all the other elements in the grid?

Question

I have two grids. One is the main layout. The other is a form that uses a grid in that layout:

my-grid {
    display: grid;
    grid-template-areas: "hd hd hd hd hd hd hd hd hd hd hd hd"
    "nav nav nav nav nav nav nav nav nav sch sch sch" 
    "sd sd sd ct ct ct ct ct ct ct ct ct" 
    "ft ft ft ft ft ft ft ft ft ft ft ft ";
    grid-gap: 0px;
}

/* this is inside the my-grid main layout */
form {
    display: grid;
    grid-template: repeat(10,1fr) / repeat(4, 1fr);
    padding: .5em;
    min-height:0;
    min-width:0;
}

<div class="my-grid">
    <form>
    <label>label1</label>
    <input type="text">
    <label>label2</label>
    <input type="text">
    <label>label3</label>
    <input type="text">
    <label>label4</label>
    <input type="text">
    <label>label5</label>
    <input type="text">
    <label>label6</label>
    <input type="text">
    <label>label7</label>
    <input type="text">
    <label>label8</label>
    <input type="text">
    <textarea rows="15">A comment</textarea>
    </form>
</div>

https://codepen.io/anon/pen/WJEeqV

In that form there is a textarea (15 rows), but because it is big, it makes all the other elements big. How do I stop that textarea from making all the other elements in my form grid the same size?

If I only have display: grid, only that row with the textarea makes things big. For example, I have a save button next to it and it has grown the size of the textarea.

Is display:grid without anything else the "implicit grid"?

I am able to display all correctly without the areas, and I set the min-height of my button, but I don't know if this is the "correct" way to do things. This appears to be a normal HTML problem, not grid specific, but I do not know.

I believe this is a classic table row problem. If I substitute my search and use table and row instead of css-grid, I get many more answers that are useful.

maybe you find answer here: https://css-tricks.com/snippets/css/complete-guide-grid/ — Kamil Kiełczewski, May 03 '18 at 19:15
There are only 882 questions on the CSS-Grid. Why would I get a downvote? There aren't many questions to see on this one. I may have missed one, but the downvotes? — johnny, May 03 '18 at 19:19
I downvoted because you didn't provide enough code to reproduce the problem. I normally post a comment asking for such code but, with all due respect, somebody of your stature in this community should already know the importance of adhering to the guidelines and providing an [MCVE](http://stackoverflow.com/help/mcve). — Michael Benjamin, May 03 '18 at 19:31
it's a common thing with grids if a cell grows the column and the row grows as well, can you include some markup? — Rainbow, May 03 '18 at 19:33
@Michael_B Thank you for commenting. I thought I gave enough information, but I will look. I never realized I had any stature to be honest. I have "residual" votes because I joined back in 2008. — johnny, May 03 '18 at 19:34

score 2 · Answer 1 · answered May 03 '18 at 19:54

2

When you set multiple rows or columns to 1fr, they will resolve to equal lengths. The behavior is explained here: Equal height rows in CSS Grid Layout

Maybe instead of 1fr you want min-content:

form {
  grid-template: repeat(10, min-content) / repeat(4, min-content);
}

my-grid {
  display: grid;
  grid-template-areas: "hd hd hd hd hd hd hd hd hd hd hd hd" "nav nav nav nav nav nav nav nav nav sch sch sch" "sd sd sd ct ct ct ct ct ct ct ct ct" "ft ft ft ft ft ft ft ft ft ft ft ft ";
  grid-gap: 0px;
}


/* this is inside the my-grid main layout */

form {
  display: grid;
  grid-template: repeat(10, min-content) / repeat(4, min-content);
  padding: 0.5em;
  min-height: 0;
  min-width: 0;
}

<div class="my-grid">
  <form>
    <label>label1</label>
    <input type="text">
    <label>label2</label>
    <input type="text">
    <label>label3</label>
    <input type="text">
    <label>label4</label>
    <input type="text">
    <label>label5</label>
    <input type="text">
    <label>label6</label>
    <input type="text">
    <label>label7</label>
    <input type="text">
    <label>label8</label>
    <input type=" text">
    <textarea rows="15">A comment</textarea>
  </form>
</div>

revised codepen

answered May 03 '18 at 19:54

Michael Benjamin

346,931
104
581
701

Micheal, when I put display:grid and nothing else, no dimensions, the grid is still created (I can see it in the inspection). Is that the implicit grid and the browser creating what it thinks I need? I have forgotten all my HTML table row layout problems from 2000. I think I need it again. It is all very similar. – johnny May 03 '18 at 19:56
Yes, it is the implicit grid. But no, it's not the browser creating what it thinks you need. It's just the initial value of `auto` on `grid-auto-rows` and `grid-auto-columns` (which size implicit tracks). Both `auto` and `fr` have similar behavior, as described in the beginning of my answer. – Michael Benjamin May 03 '18 at 19:59
I updated the Pen so it is more explicit. I'm not sure I am implementing what you are saying correctly. – johnny May 03 '18 at 20:02
Use [my pen](https://codepen.io/anon/pen/KRvKVd?editors=1100). I don't think [your pen](https://codepen.io/anon/pen/ELvxwo) is working as you expect since your `type` attributes aren't closed correctly. – Michael Benjamin May 03 '18 at 20:05
Whoa! Is that the problem? A syntax error? Close the quotes are `type="text"`. – Michael Benjamin May 03 '18 at 20:05
No because if i use your pen and drag the textarea up top or somewhere else it makes things expand. – johnny May 03 '18 at 20:24

score 1 · Answer 2 · answered May 03 '18 at 19:41

1

It sounds like the row height is too tall on other rows just because a textarea exists and expands it's own row?

Try this:

form {
  grid-auto-rows: min-content;
}

answered May 03 '18 at 19:41

bassplayer7

924
1
13
38

How do I make one element in a CSS-Grid not determine the size of all the other elements in the grid?

2 Answers2