JavaFX layout: all in Grid vs Separator for each cell

Question

I am new to UI design and JavaFX, and due to the problem I am faced with I wonder which of these layouts will be easier to work with:

The first option is one element/component per cell in the grid:

The second option is using a separator for each cell in the grid:

PS: if you know a easier way to handle this I would be happy to try it.

Answer 1

Don't go for the easiest solution, choose the "right" solution. Follow this approach:

1. Go back and study your requirements or better define them so that the choice becomes obvious.
2. If it still isn't obvious, choose the solution which feels best and go with it.
3. If it starts feeling wrong or convoluted in the implementation, go back to step 1.

My guess is that your drop down below each image is logically and visually associated somehow with that image. If that's the case, then having a custom component called SelectableImageView which encompasses both controls is probably the way to go. Then you place the SelectableImageViews in your grid, ending up with a layout like your "second option".