css-grid

2热度

1回答

word-wrap: break-word在网格中不起作用。 For tables还有table-layout: fixed，网格的等价物是什么？ <div style="background: #e3e3e3; width: 75%;"> <div style="word-wrap: break-word;"> normaldivnormaldivnormaldivno

0热度

2回答

css网格栅格跨度问题

我需要网格列跨度大小的帮助。我有我的网柱验证码： .main_comp:nth-child(n+3) { //background-color: yellow; grid-template-columns: repeat(6, 1fr); } .main_comp:nth-child(n+3) .bigimg { grid-row: 1; grid-

3热度

1回答

当物品没有填满行时，不要在物品之间出现很大的间隙

请检查这个fiddle当你调整窗口大小并且卡片正在下降时，卡片的底部看起来很奇怪，它们之间有更多空间。我希望卡片的底部与上面的卡片对齐。我知道这可以用display: inline-block轻松完成，但我正在尝试使用flexbox即display: flex来做到这一点。 .parent { display: flex; justify-content: space

2热度

1回答

可以使用CSS网格布局来实现编辑器窗格的大小调整（例如，在CodePen中）

我想在不使用JS的情况下实现可调整大小的窗格，仅使用CSS Grid layout。这可能吗？例如， CodePen的编辑器为其HTML/CSS/JS编辑器提供了可调整大小的窗格。另外，看下面的例子，它以普通的JS实现它（我似乎无法在其中添加一个URL到CodePen示例中，所以添加属性有点困难，代码是http://codepen.io/gsound/）。 let isResizing = fa

0热度

2回答

多段网格布局

https://codepen.io/dye/pen/LyRJym 在这种布局中，我想有一个不大不小的网格布局的2个部分之间分隔的。任何一节中的项目数量都是未知的和动态的。什么是最好的方式去做这件事？我已经添加了一个分隔线，我想从第一列列开始并在最后一列列结束。但是，我不知道如何选择最后一行。目前，我有 .grid-item--divider { grid-column: 1/5;

0热度

1回答

Flexbox在Safari和IOS中不起作用

我制作了一个响应式弹性网格。它适用于Chrome，但不适用于Safari和IOS。我肯定错过了什么。谁能告诉我我做错了什么？ codepen section { max-width: 1280px; display: block; margin: 0 auto; } section:not(.grid) { .wrapper { displa

0热度

1回答

生成Flex项目在列方向容器包装

所以，使用行布局中的所有我需要做的包装元素在Flex DIV是这样的： div { display: flex; flex-direction: row; /* I want to change this to column */ flex-wrap: wrap; /* wrap doesn't seem to work on column, only

1热度

2回答

将滚动添加到CSS网格布局中的每一列

我想在我的网格布局中的每个列上单独滚动。目前，我正在开发一个移动唯一的Web应用程序。我想为纵向和横向使用不同的网格布局。纵向方向只是1列，每个元素都在另一个之后。这里没问题。在横向方向上，我想使用2列。我的全部内容显示在左侧，我的导航移动到右侧。现在我希望两个部分都有一个单独的滚动条。有没有办法来实现这个？如果当前列的内容结束，滚动应该停止。守则CodePen：https://codep

11热度

4回答

css网格的砌体布局

我正在尝试使用css网格布局创建砌体布局。网格中的所有物品都有变量高度。我不知道会有什么项目。所以我无法为每个项目定义grid-row。是否有可能在列的前一个结尾之后立即开始每个新项目？代码我想： .wrapper { display: grid; grid-template-columns: repeat(auto-fill, 330px); alig

15热度

2回答

使栅格项目跨度到最后一行/列

当我不知道行数时，是否可以使栅格项目从第一行开始到最后一行？可以说我有以下html与未知数量的框。我该如何制作第一个网格线到最后一个网格线的第三个.box？ .container { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; g