CSS：如何让溢出的网格项目不影响定义的网格？
[英]CSS: How to let overflowing grid items not affect the defined grid?
问题描述
Consider the following 4 columns grid:
考虑以下 4 列网格：
.container { width: 400px; height: 200px; position: relative; } .grid-columns { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; z-index: -1; } .grid-column { background-color: #ddd; } .columns { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; } .column { background-color: rgba(0, 0, 255, 0.5); grid-column-start: 3; grid-column-end: span 2; }
<div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column"></div> </div> </div>
The blue item starts at the third grey area and occupies the last 2 columns as expected.蓝色项从第三个灰色区域开始，按预期占据最后两列。
However, if we make it span 5 columns instead of 2:但是，如果我们让它跨越 5 列而不是 2 列：
grid-column-end: span 5;
...implicit tracks are added and the blue item doesn't start at the same place anymore: ...添加了隐式轨道，并且蓝色项不再从同一个位置开始：
.container { width: 400px; height: 200px; position: relative; } .grid-columns { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; z-index: -1; } .grid-column { background-color: #ddd; } .columns { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; } .column { background-color: rgba(0, 0, 255, 0.5); grid-column-start: 3; grid-column-end: span 5; }
<div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column"></div> </div> </div>
How could I force the blue item to start at the same place even if it overflows the grid?即使它溢出网格，我怎么能强制蓝色项目从同一位置开始？
I thought that adding grid-auto-columns: 0 to the grid would do the trick, but it doesn't.我认为将grid-auto-columns: 0到网格可以解决问题，但事实并非如此。
1 个解决方案
解决方案1
1 已采纳 2019-12-04 11:04:27
Use percetange to define the width instead of specifing column to avoid creating implicit columns.使用 percetange 定义宽度而不是指定列以避免创建隐式列。 100% is the width of one column and don't forget to account for the gaps: 100%是一列的宽度，不要忘记考虑间隙：
.container { width: 400px; height: 200px; position: relative; } .grid-columns { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; z-index: -1; } .grid-column { background-color: #ddd; } .columns { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; } .column { background-color: rgba(0, 0, 255, 0.5); grid-column-start: 3; width:calc(5*100% + (5 - 1)*30px) }
<div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column"></div> </div> </div>
With CSS variable you can make the syntax easier:使用 CSS 变量，您可以简化语法：
.container { width: 400px; height: 50px; position: relative; margin:10px; } .grid-columns { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; z-index: -1; } .grid-column { background-color: #ddd; } .columns { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; } .column { background-color: rgba(0, 0, 255, 0.5); grid-column-start: 3; width:calc(var(--n,1)*100% + (var(--n,1) - 1)*30px) }
<div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column"></div> </div> </div> <div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column" style="--n:2"></div> </div> </div> <div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column" style="--n:3"></div> </div> </div> <div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column" style="--n:5"></div> </div> </div>
Another idea in case you will have fixed value is to define the template using pixel values and then you will be able to use grid-column-end: span X;如果您有固定值，另一个想法是使用像素值定义模板，然后您将能够使用grid-column-end: span X;
.container { width: 400px; height: 50px; position: relative; margin:10px; } .grid-columns { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; grid-auto-columns: calc((100% - 3*30px) /4); grid-auto-flow: column; grid-column-gap: 30px; z-index: -1; } .grid-column { background-color: #ddd; } .columns { position: relative; width: 100%; height: 100%; display: grid; grid-auto-columns: calc((100% - 3*30px) /4); grid-auto-flow: column; grid-column-gap: 30px; } .column { background-color: rgba(0, 0, 255, 0.5); grid-column-start: 3; grid-column-end: span var(--n); }
<div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column"></div> </div> </div> <div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column" style="--n:2"></div> </div> </div> <div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column" style="--n:3"></div> </div> </div> <div class="container"> <div class="columns"> <div class="grid-columns"> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> <div class="grid-column"></div> </div> <div class="column" style="--n:5"></div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
溢出容器的网格项 - Grid items overflowing the container
CSS 网格不能影响输入项 - Css Grid Can't Affect Input Items
PrismJs不随CSS网格溢出 - PrismJs not overflowing with CSS Grid
CSS 网格溢出 - CSS Grid overflowing
CSS格子溢出来了 - CSS grid is overflowing
CSS Grid 内容溢出 - Css Grid content overflowing
创建一个故意溢出的 css 网格 - Create a deliberately overflowing css grid
从 css 网格溢出的内容 - content overflowing from css grid
输入元素溢出 CSS 网格 - Input elements overflowing CSS Grid
如何让CSS长栏文本加宽网格而不是溢出？ - How to make CSS long column text widen grid instead of overflowing?
相关标签