css-grid

0热度

1回答

有人能帮我弄清楚为什么下面的CSS网格示例不能按预期工作？这里有一个链接到Codepen： https://codepen.io/Nekto/pen/yPpaBE .cards { margin: 0; padding: 1em; display: grid; grid-template-columns: 1fr 1fr 1fr; gri

1热度

3回答

我可以在CSS网格中每行有不同数量的列吗？

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-auto-rows: 60px; grid-gap: 15px; } .col { background-co

0热度

2回答

保持css网格布局简单

请看下面的例子。我正在学习CSS网格。整个目的是为了保持简单并且不需要不必要地在子元素上指定不同的布局细节，所以解决方案应该符合这种模式。考虑以下几点： function toggle(t) { document.querySelectorAll('div').forEach(el => el.classList[0] === t.classList[0] ?

0热度

1回答

嵌套网格/ Flexbox标题向下推送内容

我试图在网站上构建团队成员列表。而且（总是）这个人有一个非常长的职位，推动他的工作描述下载。这造成了与其他工作描述不一致，设计师对此非常不情愿。我迄今发现的唯一的解决办法是在职位描述限制在3线，： font-size: 10px; height: 30px; line-height: 1; 但是，现在还没有，如果职位变为4线长的错误证明。此外，较小的屏幕甚至可能会将短文本换成长度超过4

1热度

1回答

格列使用FR单位

我试图做一个图片库时捉襟见肘，而我需要的图片采取一半的高度，并在容器内可用宽度的一半，所以我做了这样的事情： * { padding: 0; margin: 0; } div { height: 200px; display: grid; grid-template-columns: repeat(2, 1fr

0热度

1回答

省略号不能在CSS网格布局中工作

我在使用css网格div中的elipsis属性时遇到了一些问题。如果我将elipsis属性直接设置为网格子节点，但在网格中的div内使用时不起作用。你可以看到这里有什么问题： body{ text-align:center; } .container{ width: 300px; background-color:#ccc;

0热度

1回答

添加组件后，CSS Grid卡不再响应

我试图在card_wrapper内布置的卡之间添加React组件。 .card_wrapper { max-width: 1200px; margin: 10px auto 50px auto; display: grid; justify-items: center; grid-template-columns: repeat

-1热度

1回答

css网格fr单元显示不正确

当我在google chrome中打开下面的代码时，header和signIn选择器的跨度比.create选择器长得多，即使它们应该跨越一列。会有人有什么可能会导致这个问题的想法吗？谢谢 grid { display: grid; height: 1800px; border: 2px blue solid; grid-template: 1fr 1fr 1fr 7fr/repeat(8,

0热度

1回答

为什么css网格在IE和Edge中不起作用？

我做一个网格，像这样的结构：我的下一个非常基本的代码：https://codepen.io/anon/pen/PEpYoy .grid-list { \t padding: 0; \t display: -ms-grid; \t display: grid; \t list-style: none; \t -ms-grid-columns: 1fr 1fr 1fr

0热度

1回答

在CSS网格中选择列

我正在寻找一种方法来选择CSS网格中的列。我发现了一种使用:nth-child()选择器在静态网格中选择列的方法。例如：在3列网格中，:nth-child(2)将选择第二列中的每个网格项目。但是，如果您有像我这样的三个媒体查询的响应式网格，这不起作用。我的网格有24个网格物品。在移动设备上，内容以3列8格的格子显示。在平板电脑上，它以4×6网格显示，依此类推。我需要一种方法来选择第三列，例如无论