The fix:

Copy these 10 +3 (optional) rules below to uBO My filters.

First 3 rules are for 4 videos per row,

4-5th are for Channel page margin fix on the 4th column,

6-8th are for font size and line height,

9th is for removing annoying horizontal scrollbar and

10th is for keeping menu closed to have more space for videos. This one prevents the menu from opening even when you click on it for now. If you often use the menu, exclude this rule or simply add an exclamation mark "!" at the beginning of this line.

11-13th are for Full Width fix for Channel page Videos tab, make videos to fill the page. Only use these 3 rules if you set items-per-row to 5 or 6 from the first rules set, "(1-3/13) 4 Videos Per Row Fix", in 1080p or larger resolutions.

Tip: If you want to have more than 4 videos in a row, simply change --ytd-rich-grid-items-per-row value to 5 or 6.

! YouTube Fix & Customization v1.5
! (1-3/13) YouTube 4 Videos Per Row Fix (Home and Channel Pages)
youtube.com##ytd-rich-grid-row:style(display:contents !important;)
youtube.com###contents.ytd-rich-grid-row:style(display:contents !important;)
youtube.com##ytd-rich-grid-renderer:style(--ytd-rich-grid-items-per-row: 4 !important;)
! (4-5/13) YouTube 4 Videos Per Row Fix (Channel Page margin fix)
youtube.com##ytd-rich-item-renderer[is-slim-grid]:first-of-type:style(margin-left: auto !important;)
youtube.com##ytd-rich-item-renderer[is-slim-grid]:last-of-type:style(margin-right: auto !important;)
! (6-8/13) YouTube 4 Videos Per Row Fix (Font Size fix)
youtube.com###video-title.ytd-rich-grid-media:style(font-size: 1.4rem !important; line-height: 2rem !important;)
youtube.com###metadata-line.ytd-video-meta-block:style(font-size: 1.2rem !important; line-height: 1.8rem !important;)
youtube.com###video-title.ytd-rich-grid-slim-media:style(font-size: 1.4rem !important; line-height: 2rem !important;)
! (9/13) YouTube 4 Videos Per Row Fix (Removes annoying horizontal scrollbar)
youtube.com##body:style(overflow-x: hidden !important;) 
! (10/13) YouTube Customization (Closes menu to have more space for videos) Notice: This rule prevents the menu from opening even when you click on it for now. If you often use the menu, exclude this rule.
youtube.com##tp-yt-app-drawer:remove-attr(/opened|persistent/)

Optional:

! Optional! Only use these 3 rules below if you set items-per-row to 5 or 6 from the first rule set, "(1-3/13) 4 Videos Per Row Fix"
! (11-13/13) YouTube Channel page Videos tab Full Width Video Content (Makes videos to fill the page)
youtube.com##ytd-two-column-browse-results-renderer.grid-5-columns:style(width: 100% !important;)
youtube.com##ytd-two-column-browse-results-renderer.grid-6-columns:style(width: 100% !important;)
youtube.com##ytd-two-column-browse-results-renderer.grid:style(max-width: initial !important;)

Alternatively you can install AdashimaaTube by u/AdashimaaTube to have 4 videos per row fix and also other customizations. Who also provided display:contents property to fix the empty 4th column issue when creating this rule set.

Updates:

• New name and versioning added
• Channel Page margin fix improved
• Added Channel page Videos tab Full Width fix
• Horizontal scrollbar fix
• Closed menu to have more space for videos

​

Notice: Original post follows.

YouTube started to limit the video thumbs from 4 to 3 on the homepage. This issue or design change is discussed on other subs as well. There are some types of workarounds that some requires 1 or 2 lines of uBO code and others requires additional addon like Stylus to kind of fix it.

I checked the code and found that YT controls how many video thumbs listed on a page by calculating probably browser width. For instance when I zoom out to 80%, thumbs get back to 4 in a row. But I couldn't make them 4 when I edited width from dev tools. It lists 4 thumbs when I open YT in Private Window though.

In code here are the differences:

This is 3 bigger thumbs

Inherited from ytd-rich-grid-renderer 
element { 
--ytd-rich-grid-items-per-row: 3; 
--ytd-rich-grid-posts-per-row: 3; 
--ytd-rich-grid-slim-items-per-row: 6; 
--ytd-rich-grid-game-cards-per-row: 6; 
}

This is old 4 smaller thumbs

Inherited from ytd-rich-grid-renderer 
element { 
--ytd-rich-grid-items-per-row: 4; 
--ytd-rich-grid-posts-per-row: 3; 
--ytd-rich-grid-slim-items-per-row: 6; 
--ytd-rich-grid-game-cards-per-row: 6; 
}

Those are 4, 4, 8, 8 when browser window maximized for instance on a 1080p screen.

And this is html code of 4

<ytd-rich-item-renderer class="style-scope ytd-rich-grid-row" items-per-row="4">

And code of 3

<ytd-rich-item-renderer class="style-scope ytd-rich-grid-row" items-per-row="3">

They are both under this div below

<div id="contents" class="style-scope ytd-rich-grid-row">

So, it is controlled by data attribute and I found that this AdGuard rule to set an attribute

 example.org#%#//scriptlet('set-attr', selector, attr[, value]) 

Example

example.org#%#//scriptlet('set-attr', 'div.class > a.class', 'test-attribute', '0')

I tried to port this to uBO since scriptlet isn't supported, I couldn't find direct substitute but I think +js(set is equivalent and I tried these 2 rules below but no avail.

youtube.com##+js(set-attr, 'div.class > ytd-rich-item-renderer.style-scope.ytd-rich-grid-row', 'items-per-row', '4')

youtube.com##+js(set, ytd-rich-grid-row, items-per-row, 4) 

So, help me out here, how could we set an attribute with a +JS rule to set items-per-row to 4?

If you think there is a better solution please share.

Thanks!