I was working with this basic css grid layout, where essentially I wanted to create a grid which is 3row (538px 200px 90px) and 4column(repeat(4,1fr)) wide. But the moment I define the container (.main) as display: grid, an unnecessary horizontal scroll appears. I want to allocate 100% width not more than that, hence I even tried width: 100vw, but that seems to not work either. The horizontal scrollbar seems legit, considering my row heights add up to more than 100vh, but why is there an excess in vertical area? 1fr 1fr 1fr 1fr should divide the available space between 4 children.
Question 1: Then where is this little excess horizontal area coming from (which is making it necessary for me to scroll)? And how do I limit my max-width of grid to 100vw, hence not having this horizontal scrollbar?
<body>
<div class="main">
</div>
</body>
CSS:
*{
padding: 0;
margin: 0;
}
.main{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 538px 200px 90px;
border: 2px solid red;
width: 100vw;
}
I put that border to visualize what is going on.
Question 2: If I could actually see the grid lines dividing the container into 12 pieces, that would be dope. Any way of doing that? Where I could actually visualize what's going on with dotted lines separating each grid item maybe?
changing width: 100vw to width: 100% should do the trick