css-grid

0热度

1回答

所以，使用行布局中的所有我需要做的包装元素在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

8热度

1回答

是否存在针对特定网格位置元素的选择器？

我有一堆自动流动的网格物品的CSS网格。有时网格物品是一个1 x 1轨道，有时它们是2 x 2轨道，所以我不知道从源订单哪些项目将在网格中的某些位置。这意味着与:nth-child()造型将不可靠。我想添加样式到某些网格列中的项目（主要是最后一列）。有没有一个CSS选择器可以让我对这些物品进行风格化？例如，在本演示中，我将如何设置方框3,5和9（codepen here）？ .grid-con

3热度

2回答

内联网格元素的垂直对齐

我不明白inline-grid元素的垂直对齐的逻辑。第二个示例正常工作（请参阅代码），但第一个示例没有。为什么？我如何修复它，如下面的截图所示？还要注意。代替使用display: inline-grid，我们可以使用display: inline-flex + flex-direction: column获得相同的结果。因此，如果使用inline-grid无法完成任务，可能可以使用inli

1热度

1回答

嵌套的网格区域未正确对齐

我试图重新创建CSS网格布局。当我为每个类名声明grid-area时，网格似乎不想在grid-area: aside;和grid-area: main;的正确位置正确渲染。我认为这可能是因为这两个嵌套在其他元素内？所需的结果：https://codepen.io/chrisburton/full/YVrqRr/ 实际结果：https://codepen.io/chrisburton/pen/eW

3热度

1回答

可变宽度瓷砖的Flexbox顺序

我有我需要显示的瓷砖网格。文章瓷砖可以适合4连续。视频可以连续放入2个。我遇到的问题是：与文章，文章，文章，视频一行。视频碰到下一行。或文章，视频，视频。第二个视频再次碰到下一行。设置顺序属性似乎很痛苦，因为文章/视频的显示顺序完全是随机的。用flexbox处理这个问题有什么好方法吗？这里的小提琴 - https://jsfiddle.net/nx4ap9u4/（在这种情况下，我想有第

1热度

1回答

CSS网格布局边栏切换

这是一个关于最近添加到CSS Web标准中的新的CSS网格系统的问题。这是我尝试使用的布局示例 - >Codepen example。现在我需要切换聊天侧栏，使主div占据剩余空间。我已经知道如何在Flexbox和JavaScript中做到这一点。但是，我想尝试使用CSS网格。一种方法是做到这一点... grid-template-columns: 1fr 0; 但我想聊天栏得以顺利切换（如C

2热度

1回答

CSS网格布局 - 内容崩于微软边缘

我试图风格新CSS网格布局使用@support定义列表来解决旧的浏览器。 Autoprefixer将其更改为旧版本边缘。 dl { display: grid; grid-gap: 0.5rem 0.75rem; grid-template-columns: min-content 1fr; display: -ms-grid;