Neat 2.0 - 将网格大小从全角设置为特定像素

Question

我目前在创建网格时开始使用新的 Neat 2.0 framework. Previously in 1.8，outer-container() mixin 接受了网格大小的实际数字。但是现在使用 Sass 映射 grid-container() mixin 只接受具有以下属性的 sass 映射。

$my-custom-grid: (
  columns: 12,
  gutter: 20px,
  media: 1200px,
  color: rgba(#00d4ff, 0.25),
  direction: ltr,
);

从表面上看，这只是让网格默认成为全屏宽度。如何制作一个只有 960px 宽但在你开始缩小浏览器大小时仍然折叠的网格？

我觉得现在我会不断地移动元素，使它们不在浏览器的边缘。我确定有办法解决这个问题，但只是设置我调用 grid-container() 的元素的宽度不起作用。

有什么想法吗？

Answer 1

CSSmax-width就是答案！它不会设置容器的宽度，而是防止容器超过给定值。这样 width: calc() 仍会按预期工作。

Neat 2.0 - 将网格大小从全角设置为特定像素

Neat 2.0 - Setting the grid size from full-width to specific px

html

sass

css-frameworks

neat