基础:使用不同总列数嵌套网格
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基础:使用不同总列数嵌套网格相关的知识,希望对你有一定的参考价值。
我正在使用一个基本的12 col
网格,它工作得很好。这是我的_settings.scss
$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
small: 20px,
medium: 30px,
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;
这是我的标记:
<div class="grid-container wrapper">
<div class="grid-x grid-margin-x">
<div class="cell medium-12"></div>
</div>
</div>
现在提到我对12 cols
很满意,我想保持这样。现在对于一个特定的元素,我需要使用一个嵌套的24 col
网格,它最终会以smth结尾。像下面的标记:
<div class="grid-container wrapper">
<div class="grid-x grid-margin-x">
<div class="cell medium-12">
<div class="grid-container wrapper">
<div class="grid-x grid-margin-x">
<div class="cell medium-24"></div>
</div>
</div>
</div>
</div>
</div>
有没有办法实现这个目标?
答案
它似乎不像简单地使用类名就可以解决。但是您可以使用col
手动定义xy-cell-size()
宽度
这是我更新的scss
:
.custom-medium-24 {
width: xy-cell-size(24 of 24);
@include breakpoint(small only) {
width: 100%;
}
}
.custom-medium-14 {
width: xy-cell-size(14 of 24);
@include breakpoint(small only) {
width: 100%;
}
}
感谢评论中的提示!
以上是关于基础:使用不同总列数嵌套网格的主要内容,如果未能解决你的问题,请参考以下文章