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

css-grid 相关问题

最新问题