css-grid

-3热度

1回答

有了Chrome，Firefox和Safari技术预览版中的CSS网格支持，有没有人找到一个不错的CSS网格生成器或配置器？有点像这里这样Flexbox的发电机：http://the-echoplex.net/flexyboxes/

5热度

2回答

我知道有类似的问题，但这是具体问如何使用CSS网格布局来做到这一点。因此，我们有这个基本的网格设置： HTML（与侧边栏）： <div class="grid"> <div class="content"> <p>content</p> </div> <div class="sidebar"> <p>sidebar</p> </di

1热度

1回答

为什么网格不能在移动设备上工作？

我最近一直在玩CSS Grid，并且注意到了一些我看不到的答案。比方说，我把我的页面分成两列，然后是下一行，另一列（跨越两列）。在移动设备上，我希望他们将一个堆叠在另一个之上，然后在某个断点之后返回上述布局。下面是标记： HTML <div class="grid"> <div class="upper"> <div class="a">A</div> <div cl

0热度

1回答

使用css + sass构建这个网格的最佳方式是什么？

我正在建立这个网格。我只是建立一个单一的，简单的HTML页 - 没有什么复杂的，我不会需要其他地方重用的代码。将会有2个文本框和两个图像，它们将坐在这个网格上。我最初打算走这条路线： https://webdesign.tutsplus.com/tutorials/a-simple-responsive-grid-made-even-better-with-sass--cms-21540 哪个

2热度

1回答

CSS网格中的单词换行

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