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. Mar 4 '19 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. Mar 10 '20 at 0:32
  • @RayButterworth I find vw and vh (especially) to be very helpful.
    – JimmyJames
    Aug 6 '20 at 19:20
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
    Aug 6 '20 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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