css-grid 相关问题

情况我有一个列表，其中包含已按顺序排序的元素： 1 个元素 2 元素 3元素情况我有一个列表，其中的元素已按顺序排序： <ul> <li>1 element</li> <li>2 element</li> <li>3 element</li> <li>4 element</li> <li>5 element</li> <li>6 element</li> <li>7 element</li> <li>8 element</li> <li>9 element</li> <li>10 element</li> <li>11 element</li> </ul> 当我使用 CSS 网格并将项目分成两列时，它们会自动向左、向右、向左、向右等排序。 ul { display: grid; grid-template-columns: repeat(2, 1fr); } 问题我希望这些项目首先填充左列，然后填充右列。使用 CSS 网格，它们也应该在两列中平均划分。输出应如下所示：您可以在这里测试它：codepen 我正在寻找一个动态解决方案：列表元素的数量可以是动态的，所以说“正好 6 个元素之后你必须跳到右列”不是我想要的。我尝试过的事情我尝试使用grid-auto-flow: column，但随后项目只是水平放置：有谁知道如何仅使用 CSS 解决这个问题？如果不指定行数，这在 CSS-Grid 中是不可能的。 ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, 1fr); grid-auto-flow: column; width: max-content; column-gap: 30px; border: 1px solid black; } <ul> <li>1 element</li> <li>2 element</li> <li>3 element</li> <li>4 element</li> <li>5 element</li> <li>6 element</li> <li>7 element</li> <li>8 element</li> <li>9 element</li> <li>10 element</li> <li>11 element</li> </ul> 对于等分列，您需要使用 CSS 列和 column-count * { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } ul { display: inline-block; list-style: none; column-count: 2; margin: 1em; border: 1px solid grey; } <ul> <li>1 element</li> <li>2 element</li> <li>3 element</li> <li>4 element</li> <li>5 element</li> <li>6 element</li> <li>7 element</li> <li>8 element</li> <li>9 element</li> <li>10 element</li> <li>11 element</li> </ul>

css css-grid

回答 1 投票 0

使用显示时没有底部填充：网格和滚动

我有一个容器 div，它有一些填充、显示：网格和溢出：自动设置。当子div的高度大于父div的高度并且出现滚动条时，它会滚动，以便没有

css scroll padding css-grid

回答 3 投票 0

无法让顺风网格的列按照我想要的方式运行

我正在尝试使用以下代码创建一个类似便当的网格：我正在尝试使用以下代码创建一个类似 Bento 的网格： <div class="grid-rows-12 grid grid-cols-12 gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600"> <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div> <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div> <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div> <div class="row-span-10 col-span-3 col-start-10 row-start-1">04</div> <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div> <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div> <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div> </div> 我希望04列占据10行，但它永远不会像其他块那样扩展。我尝试过调整该列的高度值，但似乎没有任何效果。这里有一个相同的顺风播放链接：https://play.tailwindcss.com/45q49qt5iQ 如何使第 4 列完全占据网格中的可用空间？您似乎误解或没有阅读grid-row-start/end类集的文档 - 您添加了row-span-10，也许假设此类默认存在。但是，如果没有自定义配置，row-span-<number> 类名称集的范围仅从 1 到 6。要解决此问题，您可以考虑使用任意值类，row-[span_10/span_10]： <script src="https://cdn.tailwindcss.com/3.3.5"></script> <div class="grid-rows-12 grid grid-cols-12 gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600"> <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div> <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div> <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div> <div class="row-[span_10/span_10] col-span-3 col-start-10 row-start-1">04</div> <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div> <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div> <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div> </div> 或者修改您的 Tailwind 配置，将 row-span-10 作为可能的类： tailwind.config = { theme: { extend: { gridRow: { 'span-10': 'span 10 / span 10', }, }, }, };<script src="https://cdn.tailwindcss.com/3.3.5"></script> <div class="grid-rows-12 grid grid-cols-12 gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600"> <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div> <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div> <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div> <div class="row-span-10 col-span-3 col-start-10 row-start-1">04</div> <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div> <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div> <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div> </div>

html css tailwind-css css-grid

回答 1 投票 0

如果宽度为 0px 的网格项包含宽度为 0px 且左边距大于 0px 的元素，则会溢出 Firefox 中的网格容器

如果网格项的宽度为0px 包含宽度为 0px 且“margin-left”CSS 属性值大于 0 的元素并放置在网格柱轨道上，其大小为&q...

css firefox css-grid

回答 1 投票 0

如何让最后一行的项目占用CSS Grid的剩余空间？

有没有办法强制网格最后一行中的所有项目填充该行，无论它们有多少？我不知道网格中的项目数量，因此我无法定位它们

css grid-layout css-grid

回答 7 投票 0

通过拖动来滚动元素，类似于触摸设备......

考虑以下布局，显示 5x4 正方形，一些在视图中隐藏，但其余的可以通过拖动来查看... 似乎使用以下网格布局我无法滚动

javascript html css-grid

回答 1 投票 0

CSS 网格每个元素的高度相等，保持响应性

我有网格，每个元素下面都有一个图像和其他div。因为它是一个网格，所以每个元素都有响应宽度，因此它会随着屏幕缩小而自动缩放。我想要我...

html css css-grid responsive

回答 1 投票 0

压缩行 - CSS

我有这个主容器div，里面有多个div。我试着弯曲它然后弯曲包裹。它仅适用于两列，问题是第一列有空间并且它与

css flexbox css-grid

回答 1 投票 0

为什么图片会延伸到区块之外？

我为整个网格指定了 max-height: 400px。但是子元素超出了界限，尽管它们应该相对于父元素的大小按高度进行拉伸。演示我为整个max-height: 400px指定了grid。但是子元素超出了界限，尽管它们应该相对于父元素的大小按高度拉伸。演示 <div class="grid"> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> </div> * { box-sizing: border-box; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; outline: 2px solid royalblue; max-height: 400px; gap: 10px; } .grid__col { height: 100%; } .grid__col:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 3; } .grid__col:last-child { grid-column: 3 / -1; } .grid__col img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; } 您的网格将正确调整大小，直到达到 400 像素的垂直高度。当你的网格达到这个高度时，它会停止高度增长，但宽度不会增长。这会导致您的图像继续增长，因为它们不遵守容器最大高度 400px。设置 max-width 也会在容器达到 400px 高度时停止增长。在这种特定情况下，是由 max-width: 850px; 完成的。工作示例

html css css-grid

回答 1 投票 0

css-grid 相关问题

最新问题