html 行 隐藏行,html – 如何隐藏隐式网格行？

您可以使用grid-auto-rows将自动生成的行的高度设置为0px：0;并使用overflow-y隐藏它们：隐藏.演示：

.wrapper {

border: 2px solid #f76707;

background-color: #fff4e6;

display: grid;

grid-template-columns: repeat(auto-fill, 200px);

grid-template-rows: repeat(2, 1fr);

grid-auto-rows: 0; /* set height to 0 for autogenerated grid rows */

overflow-y: hidden; /* hide grid items that overflow */

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten