I am working with a 24 Susy column grid and trying to create boxes that span 6 columns each, allowing for 4 boxes per row. However, I also want to add gutters around them within a wider container that is 24 columns wide. Despite my efforts, the columns do not seem to adjust their width to accommodate the gutters. I thought Susy was supposed to handle this automatically. As a newcomer to this field, I have read numerous articles and posts but still cannot find a solution. Any assistance you can provide would be greatly appreciated.
Here is the code snippet:
.solutionThumbnails {
@include span(24 no-gutters);
@include container;
@include clearfix;
li {
@include span(6);
@include gutters(8px after);
background: #666;
float: left;
height: 240px;
display: block;
&:nth-child(4) {
margin-right: 0px;
}
}
}
Currently, the layout does not look as intended, and the fourth item is being pushed down. See the screenshot here (please ignore the formatting as I am still in the coding phase): https://i.sstatic.net/5tmWp.jpg