[vosper]

I enjoyed playing with the playground a bit, though as a developer I don't think I'd find it more convenient to use Webflow vs just writing the CSS myself, since Grid is pretty simple. However, maybe I am not your target market, so that's fine.

Some more specific feedback:

1. The initial example (the Theater flyer) is very busy visually, and looks nothing like a usable web page (sideways text?). Again, maybe this is me misunderstanding what webflow is for, but I think I would prefer a slightly less complex initial view of the grid.

2. I don't understand the second image, of the frowny computer icon. Again, looks nothing like a web page and I'm not sure of the relevance of the image to CSS grid. There's a hint says "turn that frown upside down" which I assume is a cute prompt that I should do something with the design... but... what? I looked for an affordance to indicate that I could rotate the grid, but there isn't one. I could find no way to rotate it. What am I supposed to be doing here?

3. The fourth one says "These shapes aren't in the right place". Aren't they? Where are they supposed to be? What am I supposed to do here? Is it just trying to show me that things can be moved around? I figured that out on the first page. Also (minor) the arrow is not actually pointing at shapes, it's pointing at a blank part of the layout.

4. By the time I get to the end of the examples / demo I haven't seen anything that looks like something that I would be dealing with as a web developer. So, I'm unclear whether this tool is something that is intended for me, or as a way to use grids to design print media?

[thesergie]

Hey Craig thanks for the feedback! The examples are not representative of actual website design/layouts, but we wanted to show off the roots of grid design (which originated in print media) and demonstrate that you can build equally expressive designs on the web. With CSS grid there is no limit!

As for providing affordance for what each example should look like, we have a button in the top left corner that you can hover over. Unfortunately we only point it out in the very first example, like we do with the CSS export button. It would be better to show the notes that draws attention to these buttons until you actually interact with them. Thanks again for the feedback. :)