问题
Using CSS Grid layout how can I safely hide a row without grid-template-rows layout properties getting passed over to the next row? I tried display: none; but the layout of the hidden element is passed over to the next element.
Here's a code example: http://plnkr.co/edit/E3kuJcDxKnrjjbdVHQbO?p=preview. What I'm trying to do is toggle the visibility of the .item2 element without effecting any other elements on the page. Thanks!
回答1:
Since you're not using grid-gap in your example, you can achieve this like so:
.grid {
grid-template-rows: 55px 0px;
}
.item2 {
visibility: hidden;
}
To achieve the same results but with a gap, however, you'd need to avoid using the very handy grid-gap declaration, as it will cause .item2 to leave an extra gap space when collapsed. Some margin manipulation should give you the same results though.
- Example - no gap
- Example - with gap
回答2:
Set the row height for each individual item instead grid-template-rows. Then 'display: none' will work.
来源：https://stackoverflow.com/questions/47067227/hiding-an-element-with-css-grid