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?

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

| improve this answer | |
  • 1
    This plus flow layout is so much simpler that the old div float/clear mess. – JimmyJames Aug 6 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.