and 

''<p>jscher2000 - Support Volunteer [[#answer-1751417|said]]</p>'' <blockquote>If you don't mind, surround your CSS with &lt;pre&gt; and &lt;/pre&gt; tags to aid formatting. ''<p>Alex [[#answer-1751235|said]]</p>'' <blockquote>The new glitch is that: The list of 12 enlarged icons begin not from the far left side of the New Tab layout, but from its original place (that is for when there are only 6 icons). Please see the attached images. If I reduce the zoom to 80%, the list of tiles get aligned in the center with equal spaces from left and right sides. </blockquote> I'm not sure why that is happening. I created the different width break points in the @media statements to fit everything on my screen, which is Full HD at 100% / 96ppi zoom (not enlarged). You might need to adjust the min-width points if they are too low, or reduce the number of columns. ''For reference, not fixed:'' <pre>/** Grid column count Override Fx141 **/ .top-sites-list { grid-template-columns: repeat(4, 1fr) !important; } @media (min-width: 680px) { .top-sites-list { grid-template-columns: repeat(6, 1fr) !important; } } @media (min-width: 920px) { .top-sites-list { grid-template-columns: repeat(8, 1fr) !important; } } @media (min-width: 1080px) { .top-sites-list { grid-template-columns: repeat(10, 1fr) !important; } } @media (min-width: 1360px) { .top-sites-list { grid-template-columns: repeat(12, 1fr) !important; } } </pre> </blockquote> Thanks a lot for your time and nice help. About your comments, sure I deleted one of them and added its important points to the other (so I somehow merged them together). By the way, upon editing and updating my post, the forum says the following and I don't know if my changes have been taken place. I myself can see the edited post on the page, but suspect perhaps it is only me and moderators who can see it. Perhaps my post is invisible to others. (I just checked it with another browser and noted that my latest edits are visible to everyone.) Just for future reference, the forum says: An Error Occurred Oh, no! It looks like an unexpected error occurred. We've already notified the site administrators. Please try again now, or in a few minutes. ----------------------------- Regarding the <pre> and </pre> tags, many thanks. I was looking for a "Code" button that allows me to format the code appropriately, but the forum didn't have any such buttons. (Perhaps, Firefox should add it to their forum). ----------------------------- Regarding center-aligning the block of tiles, thanks a lot for your code. Yes reducing the number of tiles makes it look like as if it is '''''somehow''''' center-aligned (while in reality, it is still right-aligned but because there is now some empty space on the right, it looks center-aligned). The empty space on the left and right sides are not exactly the same, but it is good enough. But when I reduce the zoom to 80%, the block of tiles becomes ''really'' center-aligned, that is it itself aligns itself from the both sides exactly equally. The block suddenly jumps from the right to the center, as if it recognizes that it is misplaced and corrects itself; it looks like something in the code (that had not been triggered before) gets triggered and begins to work. Though I would prefer the whole block to fill All the empty space, meaning that in each row, the block of tiles should begin from the far left and extend to the far right (but not beyond the screen width), and then to the next row. ------------------------------- Thanks for mentioning the 96dpi resolution. My screen resolution is 1920 * 1080, with a '''Text Size of 125% (enlarged zoom)'''.

I haven't dug deeply into it, but the grid layout doesn't seem to wrap automatically like the old flex layout. There might be a way to override grid layout so the buttons just flow, but I haven't studied flex and grid layout enough to come up with a recipe for that.