问题标签 [grid-system]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1506 浏览

css - 我应该学习哪个 CSS 网格系统?

复制

什么是最好的 CSS 框架,值得付出努力吗?
有人可以推荐一个 Bells and Whistles CSS 框架吗?
帮我选一个 CSS 框架:960 vs Blueprint vs ???
最好的 CSS 框架?
如何选择 CSS 框架?
什么是最好的 CSS GridFramework

我开始使用Blueprint CSS,但听说过很多关于960 Grid SystemYahoo!的事情。网格

我似乎无法很好地处理使用哪个(或为什么)。

我正在寻找有关我应该使用哪种网格系统的任何建议。易用性、灵活性和代码可读性对我来说很重要。

0 投票
2 回答
3399 浏览

grid-system - 您在设计网页时使用网格系统吗?

我试图弄清楚为什么我会使用网格系统。我读过一些,但我就是不明白。我习惯于将 html 中的内容放在页面上并完成它,但是我有一个新项目并且想使用网格,因为显然这是一种最佳实践。

我在另一个 SO 问题中引用的一篇文章中读到,它说网格设计处于各种发展阶段,甚至是应用程序表单设计。这让我想到了诸如对齐网格之类的事情,我不知道网页设计领域中的网格是否相同。我希望有人能给我一个简短但不太复杂的视图,而不是我已经使用过的谷歌链接。

感谢您的任何帮助。

编辑:我发现这个网站最简单: http ://www.zurb.com/playground/css-grid-builder 但同样,我如何处理 12 列?列中的所有内容都“粉碎”以适应列吗?这对我来说没有意义。

编辑:我阅读了下面的 grid 960 教程,感觉好多了,但最后它说:

您也可以在生产代码中使用 Grid 960 的概念,但不建议在生产过程中一直坚持使用框架。CSS 框架就像任何工具一样,都有它们的用途。考虑到这一点,继续制作原型!

我并不想断章取义,但如果我不在生产中使用它,那有什么意义呢?我了解原型设计的必要性,但如果我喜欢原型,为什么不使用 960 网格?我可能不明白评论。谢谢。

编辑:

960系统是生产用的吗?

0 投票
2 回答
1235 浏览

css - 填充/宽度问题 - 我可以在网格系统(例如 960 网格系统)中使用 box-sizing 吗?

我使用 960 网格系统已经有一段时间了,在向我的 div 添加填充时总是遇到问题。

我想知道修改网格系统 CSS 并添加box-sizing: border-box到我的 *grid_x* 类中是否是一种好的/安全的做法。有什么缺点吗?

到目前为止,我一直在使用带有额外填充的内部 div,所以我不会弄乱包含网格类的 div。它工作得很好,但它只是在整个地方用额外的 div 填充了我的布局。

box-sizing一个不错的选择,还是您有任何其他解决方法、解决方案、建议?

非常感谢

0 投票
1 回答
663 浏览

css - div没有使用css网格正确对齐

我在此页面上使用 960 网格系统,其中列出了我的 instapaper 书签: http: //labs.tonyhue.com/bookmarks/

但是,社交媒体部分与其他部分不同。它应该在编程部分之后向右对齐。有任何想法吗?

0 投票
3 回答
11468 浏览

css - 是否可以覆盖网格系统以使用全宽

我正在使用 Twitter Bootstrap 作为 Css 框架,并在想当大多数显示器现在的分辨率1280 X n为 我非常喜欢 Bootstrap,以至于我现在不想停下来重新开始为更大的屏幕(或我老板想要的全屏宽度)编写 css 的整个过程。

是否可以更改/更改 hack 或命名它,将 css 文件调整为全屏或至少 1200Px 大小而不是它现在使用的 940px?

0 投票
4 回答
11501 浏览

css - 是否有任何全宽度支持 CSS 网格系统?

是否有任何支持全视口宽度的 CSS 网格系统?大多数网格系统似乎只打算宽度为 960 像素到 1140 像素。这是普通用户部署最多的宽度(因为大多数人使用 1280px × 1024px)。

我的目的是为使用全高清分辨率(1920px × 1080px)的用户提供响应式布局。

如果有更好/更简单的制作方法,请告诉我

0 投票
1 回答
824 浏览

css - 如何使用 CSS Grid (Semantic.gs) 在嵌套列的父列上进行填充

我使用Semantic.gs作为我的网格系统。我正在按照嵌套列示例来尝试创建我想要的内容,同时尽可能地遵循网格。给定来自 Semantic.gs 的嵌套列示例代码:

HTML

较少的

我的问题是,在尽可能遵守网格系统(semantic.gs)的同时,向嵌套列的父级添加填充(理想情况下与排水沟宽度相同)的最佳方法是什么?请注意,我使用的是 960px 的固定布局

这是我尝试在米色父元素上使用左右填充来实现的示例(Photoshop,不完全根据上面的代码)图像:

在此处输入图像描述

更新: 按照桑迪普斯的例子,我能够做到这一点,但我没有提到我使用的是 960px 网格。这是我的结果:http ://bit.ly/M5fr5N 。

0 投票
2 回答
74 浏览

css - 你是把班级/身份证放在同一个 div 上还是把它们分开?

由于我在 yui3 文档上找不到任何内容,因此请在下面询问您的意见。最佳做法是什么,为什么?

或者

问候,城堡

0 投票
2 回答
348 浏览

php - PHP/MySQL 循环的问题

我正在研究网格系统中的一个循环,该循环一次显示 2 个网格行,每行 3 个内联图像(分页)。我一直在尝试调试我的代码以<div id="clear"></div>在每 3 个返回的 MySQL 行后显示,但没有成功。

PHP/HTML

我如何设置网格是,在从左到右的每个网格行中,都有一个alpha分配给第一个元素的omega类和一个分配给最后一个元素的类。为了在<div id="clear"></div>技术上每 3 个返回 MySQL 行后显示,这应该有效:

生成的列表项

然而事实并非如此。在等于 18 个总图像的 6 个返回网格行内,它<div id="clear"></div>在 MySQL 行 1-3 和 13-15 之后生成良好,但对于 MySQL 行 6-9,<div id="clear"></div>显示在 MySQL 行 6 之后,它应该在 9 之后显示。

我希望这是有道理的,任何建议将不胜感激。

0 投票
15 回答
67787 浏览

css - zurb基础是否可以有全行宽

我正在使用基础 3 来构建响应式网站,但我想让页脚和导航背景宽度占据整个宽度?我已将我的行命名为

我试图寻找如何解决这个问题,但我没有选择。我假设它是foundation.css 文件中的一个小修复,但由于我是新手,目前它有点过于庞大。

任何指针都非常感谢。