只是我使用这个框架为我自己的项目制作的一些东西。
我在我的应用程序中使用 SASS,使用这个小片段可以更轻松地调整网格。
.grid-stack-item {
$gridstack-columns: 12;
<strong i="7">@for</strong> $i from 1 through $gridstack-columns {
&[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
&[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
&.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
&.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
}
}
我已经用你的代码片段更新了自述文件。 谢谢你。
谈话晚了,但您可能还想拥有宽度变量,以百分比或像素为单位,因为响应性和流畅性并不总是相辅相成......一件事是拥有一个响应容器,另一件事是拥有响应式小部件,因此有时具有像素尺寸并不是一个坏主意。
因此,如果您将该逻辑放在媒体查询中,您可以拥有不同的基于像素/百分比的小部件大小。
$gridstack-columns: 12;
$resolution: 1440px;
<strong i="7">@media</strong> (min-width: 1440px) {
.container {
.grid-stack {
.grid-stack-item {
position: absolute !important;
<strong i="8">@for</strong> $i from 1 through $gridstack-columns {
&[data-gs-width='#{$i}'] { width: ($resolution / $gridstack-columns) * $i; }
&[data-gs-x='#{$i}'] { left: ($resolution / $gridstack-columns) * $i; }
&.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: ($resolution / $gridstack-columns) * $i; }
&.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: ($resolution / $gridstack-columns) * $i; }
}
}
}
}
}
这是一个较少的 css 版本:
<strong i="6">@columns</strong>: 6;
.gs-item(@n) when (<strong i="7">@n</strong> > 0) {
.gs-item(<strong i="8">@n</strong> - 1);
&[data-gs-width="@{n}"] { width: (100% / @columns) * @n; }
&[data-gs-x="@{n}"] { left: (100% / @columns) * @n; }
&[data-gs-min-width="@{n}"] { min-width: (100% / @columns) * @n; }
&[data-gs-max-width="@{n}"] { max-width: (100% / @columns) * @n; }
}
.grid-stack-item {
.gs-item(@columns);
}
@ascendantofrain @cspeer @troolee @radiolips这仍然有效吗?
我将列设置为 36,运行 sass,在代码中使用它,宽度现在使用基于 36 列的 %s,但拖放有不良体验。 我无法在 36 列网格中拖放,它一直在这里和那里移动。 我们是否也需要 js 更改? 看起来不像...
@mandys @ascendantofrain我认为这是因为核心 gridstack.css 样式。 您必须覆盖它们:
.grid-stack > .grid-stack-item {
$gridstack-columns: 200;
<strong i="8">@for</strong> $i from 1 through $gridstack-columns {
&[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
&[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
&.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
&.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
}
}
但是我还不能解决重叠项目的问题。
我还必须添加min-width
才能在 0.3 版上工作(顺便说一下,我用它来解决重叠问题。)
.grid-stack > .grid-stack-item {
$gridstack-columns: 36;
<strong i="7">@for</strong> $i from 1 through $gridstack-columns {
&[data-gs-width='#{$i}'] {
width: (100% / $gridstack-columns) * $i;
min-width: (100% / $gridstack-columns) * $i;
}
&[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
&.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
&.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
}
}