css-grid

0热度

1回答

我试图用grid布局设计带有/ OK /向下/向左/向右按钮的电视遥控器。问题在于结果对我来说是意想不到的。我只想定义3行3列，并在它们之间平均分配特定的位置和空间。我究竟做错了什么？该result看起来像这样 Up left OK right down 而不是 Up | <left----OK---Right--> | Down 代码 #gr

4热度

1回答

CSS grid＆Sass

CSS工作组成员Rachel Andrews在会议视频中提到Sass与新的CSS网格规范兼容。那么，有没有人知道为Sass的网格模板区域分隔“ASCII艺术”的语法？自从检查了Sass文档并且找不到任何东西（还）。我得到的错误涉及间距。欣赏社区中的任何指针。如果没有，回的.css直到那时（：谢谢... .wrapper grid-template-areas: header

1热度

3回答

在CSS网格布局中流畅地缩放项目

我已经使用display: grid创建了一个布局，我已经使用旧的padding-top技巧来获得流体方形div，但我想知道是否有更好的方法来做到这一点，无论是与CSS网格或Flexbox。布局应该看起来像，而不是使用JS。 https://codepen.io/anon/pen/GWzavX .o-container { margin: 0 auto; max-wid

11热度

1回答

与SCSS命名的CSS网格线

我正在使用codepen.io中的新CSS Grid Layout system进行实验。它有一个有趣的功能named grid lines，它允许为列和行之间的网格线定义自定义名称。不幸的是，我似乎无法获得该功能，因为SCSS不赞成[line-name]语法。 #container.named { grid-template-columns: [main-start] 100px [c

-3热度

1回答

寻找CSS网格生成器或配置器

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

5热度

2回答

CSS网格：如何在第二列不存在的情况下使列满跨度？

我知道有类似的问题，但这是具体问如何使用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 哪个

4热度

1回答

对齐不同父容器的子元素

我试图在容器之间垂直对齐可变高度元素，即每个容器中的第一个元素彼此垂直对齐，每个容器中的第二个元素与对方垂直对齐，等等等。我正在使用flexbox，但不知道这是甚至可能吗？或者有可能使用CSS Grid？期望的结果 See demo在那里我没有设法得到它的工作呢。 main { display: flex; flex-wrap: wrap; } .

1热度

3回答

什么是正确的网格列声明？

我很困惑。我正在阅读关于CSS中的网格。我正在读一本书微软，他们已经写了下面的属性： .container{ grid-columns: 1; } 但是，在一个视频，我在YouTube上观看，他们写道： .container{ grid-template-columns: 1; } 哪一个是正确的？