在下面的布局中,我想让绿色部分重新调整大小。调整大小时,单元格 8 应占用剩余空间,而不会影响其他行中的任何其他单元格。
.App {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 50px 1fr 200px 30px;
width: 100%;
height: 100%;
}
.App > div {
border: 2px solid black;
}
.nav {
background: green;
}
<div class="App">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="nav">7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
尺寸变化将由用户完成。但为了演示,请考虑将 .nav
元素的 width
更改为 100px
。 .nav
的大小改变后,8 个单元格应占用剩余空间并增长。
.nav {
background: green;
width: 100px;
}
使用 CSS Grid
可以实现这种行为吗?
最佳答案
您不能更改 nav
宽度并期望它只影响它旁边的元素 - 它会影响整个第一列。您可以尝试在下面的演示中调整 nav
的大小(使用 grid-template-columns: auto 1fr 200px
)以及足够的 min-width
和最大宽度
:
.App {
display: grid;
grid-template-columns: auto 1fr 200px; /* changed */
grid-template-rows: 50px 1fr 200px 30px;
}
.App > div {
border: 2px solid black;
}
.nav {
background: green;
width: 100px; /* default width */
max-width: calc(100vw - 260px); /* do go beyond the third column */
min-width: 25px; /* min width of nav */
resize: horizontal; /* resize the div */
overflow: hidden; /* resize works if overflow not visible */
}
<div class="App"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div class="nav">7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
这是您当前标记所能达到的极限。如果您可以通过将 8
和 7
包装成一个 2 列的 grid item 来更改您的 html 并制作一个 flexbox,您可以拥有期望的效果 - 请参见下面的演示:
* {
box-sizing: border-box;
}
.App {
display: grid;
grid-template-columns: 1fr 1fr 200px;
grid-template-rows: 50px 1fr 200px 30px;
}
.App > div {
border: 2px solid black;
}
.nav {
grid-column: span 2;
display: flex;
}
.nav > div:first-child {
background: green;
resize: horizontal;
overflow: hidden;
width: 50%;
}
.nav > div:last-child {
flex: 1;
width: 50%;
}
<div class="App">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="nav">
<div>7</div>
<div>8</div>
</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
您可以在这些帖子中阅读更多关于带有可调整大小 slider 的 flexboxes 的信息:
关于html - CSS 网格可调整大小的单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56091309/