Hi there. I read through the blog post on this and wrote up my own small grid system based on it. I could not get individual grid-cell sizing to work. So, as a little test, I copied the exact CSS from the repo, changed my markup to match it, and it still isn't working.
I'm trying to make something like this:
<div class="Grid small-Grid--full">
<div class="Grid-cell">
<p>...</p>
</div>
<div class="Grid-cell Grid--1of3">
<p>...</p>
</div>
</div>
Note, in place of Grid--1of3
I have also tried large-Grid--1of3
and med-Grid--1of3
.
The grids will collapse one on top of the other at the small breakpoint, as expected. However, at breakpoints above small, they stay at 50% width each, rather than splitting to 66% and 33%. I inspected the code in the blog post, and as far as I can tell I'm doing it the same way.
This is with the exact same CSS from solved-by-flexbox/assets/css/components/grid.css
I'm not sure if I'm missing something that's staring me right in the face, or what.
Thanks!