How do I increase the number of videos shown on the Youtube homepage?

Question

I visited a friend's house and used his computer. We both have 4K displays but I noticed that that his YouTube homepage displayed many more videos that mine.

Where I usually have 2 rows by 4 columns of suggested videos, he had something like 8 rows by 8 columns.

I asked him how he achieved this but he had no idea why our pages would be different.

I've searched through YouTube's settings as well as Google but nothing seems to relate to this, and I don't understand how to achieve it.

How can I modify my YouTube layout to be more like my friend's?

Answer 1

Can be achievable by modifying elements on the page. This is the userstyle (css) I use with Stylus :

ytd-rich-grid-renderer {
    margin: 8px;
    --ytd-rich-grid-items-per-row: 8 !important;
}
#contents > ytd-rich-grid-row,
#contents > ytd-rich-grid-row > #contents {
    display: contents;
}

Can be ported to other userstyle managers, or even uBlock-Origin.

Answer 2

The answer by Neeraj doesn't solve the problem for displays with 2K+ resolutions.

It also doesn't utilize extra empty space on the sides.

A better alternative, without shrinking the video previews, is to use the following as your userstyle:

ytd-two-column-browse-results-renderer.grid:not(.grid-disabled){
    max-width: 100% !important;
}
ytd-two-column-browse-results-renderer.grid-6-columns, .grid-6-columns.ytd-two-column-browse-results-renderer{
    width: 100% !important;
}

In the case of 4K displays, you can also add extra rule for 8 columns:

ytd-two-column-browse-results-renderer.grid-8-columns, .grid-8-columns.ytd-two-column-browse-results-renderer{
    width: 100% !important;
}

Answer 3

Whereas I usually have 2 rows and 4 columns (of videos suggested for me, opposed to recommended) he had something akin to 8 rows and 8 columns.

Look like Youtube suggestions page (aka www.youtube.com front page) organizes thumbnails and left menu based on the browser window width. Extend the width - you may get more columns, though at some point the site may start showing you bigger thumbnails too; plus it looks like they are changing and experimenting with the layout all the time. More technically this behavior is controlled by ytd-rich-grid-* CSS class and besides browser window width also depend on scale factor, and probably internal system scaling as well.

At the moment I've tried this in Opera and decreasing scale factor (zoom) in the browser does increase number of columns, though I had to Ctrl+scroll it down to 50% and below for new columns to appear.