Can someone look at my code and tell me why the three bottom boxes are spilling outside of the screen? They should be completely visible at the right edge of the screen, without a horizontal scroll bar. How can I fix this? Thank you.
#outside-grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
justify-content: end;
}
You have given justify-content: end in your CSS, make it to justify-content: center or justify-content: start. So you won’t have a scroll bar.
There are many problems in your CSS;
First you don’t remove default margin from body and you don’t set box-sizing: border-box; so every element is taking the width and add padding and border on top of it.
Second you set the width of list items to 100% and they want to take full width. But you don’t set any grid-columns so they are going take the full width of body element.
I added
* {
box-sizing: border-box;
}
As for the grid-column thing…I have no idea what I’m supposed to do. I need more guidance. The stuff I find from Googling about it is not helpful at all.
I gave up on grid. I switch it to flexbox with column direction. Now I could get it to center by setting the right and left margins, but then they were super narrow on mobile devices. So now I removed that and the boxes are sitting on the left side. How can I center them on the page? align-items is only barely moving them. When I set that to end it actually moves them a smidge to the left (partially out of screen).
You have set the width of parent to 500px
#outside-grid {
width: 500px;
}
and the width of its child lists to 100% and added margins on top of it.
align-items and justify-content only works to change flex items position not on its parent.
If you want to center now the parent you can add
margin: 0 auto; align-items: center;
to parent.
But I recommend you to improve your CSS skills.
I think regardless of where you justify your content to and whether you use box-sizing or not. You need to make your div containers responsive so they can adjust to screen changes or they will still move off screen as the viewport shrinks.
As an example you could give your containers a width of 60vw and a min-width of say 230px so they don’t get ridiculously small as screen shrinks
@adeelch30ty and @Jaydog Thank you both very much. Things are finally behaving now. Much appreciated! And Jaydog, your mention of vw was very helpful.
Though I know that % is based on the parent element it still doesn’t always do what I expect it to do. Sometimes vw works better although some people don’t like vw. There is actually a css property called clamp that lets you set a min,ideal and max value in just1 line of code. It looks like:
width:clamp(230px,60vw,600px);
You might find that useful for controlling your containers. It’s supported by most browsers now I think
One piece of advice from me is never to set fixed width and heights. Try to ignore fixed widths and heights and use these instead set max-width and width in percentages and set min-height instead of height.
In this way you don’t have to write many media quires .
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.