How do I stop css grid width extending beyond screen width, and how do browsers calculate css-grid width?

Question

I have the following:

<html>
<head>
<style>
  #outer-grid {
    display: grid;
    grid-gap:0vh;
    grid-template-columns: repeat(2, 1fr) 30px;     /*also tried auto in place of 1fr*/
    grid-template-rows: repeat(2,1fr);
    height: 100vh;
    width: 100vw;
    position: absolute;

  }
</style>
</head>
<body>
<div id='outer-grid'>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
</div>
</body>
</html>

This results in content extending beyond the screen width, with scroll bars added (Firefox). What I was expecting is for the right hand column to be fixed at the right hand margin. What am I doing wrong?

How does the browser calculate the overall width in this case?

Take a look at [force css grid container to fill full screen of device](https://stackoverflow.com/a/43747245/11271432) — Cray, Jun 12 '19 at 11:18
do you need position absolute? I removed it and it works fine — Jabberwocky, Jun 12 '19 at 11:21
remove `position` and `change width: 100vw` to `width: 100%` and you're good to go — Jabberwocky, Jun 12 '19 at 11:25
Reset the margin OR add `top:0;left:0` to the positon:absolute element — Temani Afif, Jun 12 '19 at 11:27
@TemaniAfif Unless he absolutely needs it to be position absolute for some design reason, he shouldn't be using it as absolute is removing everything from the flow. Top and left will work, but it's not a good solution — Jabberwocky, Jun 12 '19 at 11:28
@Jabberwocky thanks good answer - why not post as a separate answer... — Lee, Jun 12 '19 at 11:29
@Jabberwocky I never said it's good to use position:absolute .. I am giving the fix to his code. his design decision is out of the scope of the question and it's simply opinion based. — Temani Afif, Jun 12 '19 at 11:30
I added 3 duplicates so you can understand that body has a default margin (1) and that vw unit include the scroll bar (2) and to understand how position:absolute will get positionned if you don't set top/left/right/bottom (3) — Temani Afif, Jun 12 '19 at 11:34

Pedro Figueiredo · Accepted Answer · 2019-06-12T11:33:02.340

So, what's happening is that you are giving your grid 100vw, meaning, it will be 100% of the width of the viewport right? Well, by default, the body has margin around, so, your grid will be 100vw but because you have margin in the body, the grid seems to go off screen.

So, what you need to do, to reset the layout is:

*{
  margin:0;
  padding: 0;
}

And then, just apply the margins and paddings you want in the grid element.

You could probably follow something along the lines of the codepen, that I've created: https://codepen.io/pedro-figueiredo/pen/EBaGOg

score -3 · Answer 2 · answered Jun 12 '19 at 11:14

-3

Try this

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Refer this for responsive design

answered Jun 12 '19 at 11:14

sidrao2006

1,228
2
10
32

Thankyou, but alas that does not work for me. – Lee Jun 12 '19 at 11:16
Why what happened – sidrao2006 Jun 12 '19 at 11:18
The same thing (scroll bars added, content beyond width). Does it work for you? – Lee Jun 12 '19 at 11:19
I don't use firefox but the responsive design should work. I have tried responsive design in chrome – sidrao2006 Jun 12 '19 at 11:21

How do I stop css grid width extending beyond screen width, and how do browsers calculate css-grid width?

2 Answers2