Foundation: Nesting grids with different amount of total columns - sass

Question

I'm using a basic 12 col grid which works perfectly fine. This is my _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;
And this my markup:
<div class="grid-container wrapper">
<div class="grid-x grid-margin-x">
<div class="cell medium-12"></div>
</div>
</div>
Now as mentioned I'm happy with the 12 cols and I want to keep it like this. Now for a specific element, I need to use a nested 24 col grid, which would end up in smth. like the following markup:
<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>
Is there any way to achieve this?

Answer 1

It seems not like it's solvable by simply using class names. But you are able to define the col width manually with xy-cell-size()
This is my updated 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%;
}
}
Thanks for the hints in the comments!