2

It seems like HTML5 has about a zillion different layouts and methods for positioning divs, few of which seem to work exactly as described in most browsers.

Imagine an implementation of, say, Tetris in HTML/CSS/JS. So you have some kind of background, some pieces already on the screen, and a moving piece, all of which need to be aligned with respect to each other.

It'd be nice if this used some kind of grid-based system so that it would automatically scale to arbitrary window sizes without the program manually calculating pixel widths and so forth.

What is the best way to do this sort of thing? Grid layouts? Using percentages for everything and relative positioning? Or are there serious problems with moving divs around that make this non-competitive with using the <canvas> tag?

3
  • Have you considered using a JavaScript game engine? If you can find an engine suitable for your needs, then it might inform your best practices. Commented Mar 4, 2019 at 18:21
  • Using relative sizes (e.g. "%" and "em") instead of absolute sizes (e.g. "px" and "cm") is a good idea for everything in general, not only for this application. Commented Mar 10, 2020 at 0:32
  • @RayButterworth I find vw and vh (especially) to be very helpful.
    – JimmyJames
    Commented Aug 6, 2020 at 19:20

1 Answer 1

1

It'd be nice if this used some kind of grid-based system so that it would automatically scale to arbitrary window sizes without the program manually calculating pixel widths and so forth.

Tetris lends itself very straightforwardly to a grid, so the most appropriate layout technology for Tetris in HTML/CSS/JS is almost certainly CSS Grid.


Further Information on CSS Grid:

1
  • 1
    This plus flow layout is so much simpler that the old div float/clear mess.
    – JimmyJames
    Commented Aug 6, 2020 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.