search

theme-tools / sass-tools

My Sass/Scss Mixins and more
http://theme-tools.github.io/sass-tools/
5 stars 2 forks source link

Smart grid item width bug #3

Open a-fro opened 7 years ago

a-fro commented 7 years ago

Hey Evan. I'm using the smart grid for a new build on PL/D8, outputting teasers as cards. The grid items work great in PL, but when I use them in Drupal, the last item on each row drops down to a new row. It seems like it's related to the 1px border on the items. The width calc looks like the following: width: calc((33.33333% + 10.66667px) - 32px). If I change that to calc((33.33333% + 8px) - 32px), the last item comes back into the row. It also works as expected if I remove the 1px border. Any suggestions?

a-fro commented 7 years ago

I realize I'm not giving you a lot of info to go on. One additional clue: when I turn the border off using the inspector, the box model for the smart grid item goes from being 416px wide to 378px. That doesn't make any sense to me. See images:

screen shot 2017-10-09 at 10 38 24 am screen shot 2017-10-09 at 10 37 56 am
a-fro commented 7 years ago

Another update. Looks like it was due to the box-model. Where do you recommend setting the box-model on a project? Should the smart-grid take this into account? I created a PR for you to see one option for fixing the issue.