How to remove horizontal scrollbar in css grid?

Question

css

I set the template-areas to 100vh and 100vw in general, and everything seems to be fine, but as soon as I fill the content block with random lorem words so that it has to stretch (set the auto property), then horizontal page scrolling appears along with vertical scrolling. How to fix this mess?

Here is the code, it clearly shows that there is a horizontal scrollbar: https://jsfiddle.net/9wxtofbd/

I guess about the reason: a vertical scrollbar appeared and the visual width of the page decreased exactly by the size of the scrollbar. I searched the Internet and tried to use max-width (did not help), I tried overflow: hidden, but this is a crutch in my opinion, leading to other unnecessary consequences.

Answer 1

grid-template-columns: 20% 60% 20%;
grid-template-columns: 2fr 6fr 2fr;
grid-template-columns: 1fr 3fr 1fr;