9

There is a grid with many small rows and columns, something like this:

enter image description here

Items will be placed inside it, for example:

enter image description here

Grid is created with something like:

grid-template-rows: repeat(auto-fill, 10px);
grid-template-columns: repeat(auto-fill, 10px);
  • Width of the grid can be as wide as browser window, say 2000px.
  • Height can be a multiple screens, say 10000px.
  • Tracks are not visible to the user, above images are just to demonstrate how CSS Grid layout looks.
  • There can be hundreds of "items" (grey areas on above image), each occupying some number of cells (it can be 1x1 item, and it can be 60x40 item)

Questions

  • Is this a performance concern? Is it expensive for browsers to generate grid with a few hundred columns and a few thousand rows?
  • If yes, is there a way to optimize repeat(auto-fill, 10px)? Maybe percentages should be used instead (repeat(auto-fill, 1%)), or something instead of auto-fill?

Or it's better doing this via JavaScript (height to container, left/top to items)?

Marvin3
  • 5,741
  • 8
  • 37
  • 45
  • In chrome there is a limiation of the number of rows (related: https://stackoverflow.com/q/54956609/8620333) – Temani Afif May 28 '19 at 10:49
  • If this will only be a visual thing, you can probably consider better technique like canvas, background, etc where you will need few elements – Temani Afif May 28 '19 at 10:50
  • 2
    Css grid is a very efficient way to do this kind of operation. It will have a small footprint and will still be far superior to other options including javascript. Why don't you just knock it up and see how it performs? It's not that big of an operation. – DreamTeK May 28 '19 at 14:05
  • 1
    Dayum, I wish we could have opinion- and experience-based Q&A about such topics, it's really fascinating. – Félix Adriyel Gagnon-Grenier Jul 05 '21 at 22:12

0 Answers0