网格不适应窗口大小调整

Question

我有以下代码，这是我的导航栏的简化。它工作正常，直到我将窗口调整到左侧（使其变小）。 width: 100%不适应新窗口宽度，窗口外最右边的元素溢出（100vw也不起作用。）

div {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr repeat(2, auto);
  grid-tepmlate-rows: 1fr;
}

.fourth {
  margin-left: auto;
}

<div>
    <span>First</span>
    <span>Second</span>
    <span>Third</span>
    <span class="fourth">Fourth</span>
    <span>Fifth</span>
    <span>Sixth</span>
<div>

所以我尝试了一些jQuery：

  $(window).resize(function() {
    $('div').css('width', $(window).width());
  });
  console.log($(window).width());

div {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr repeat(2, auto);
  grid-tepmlate-rows: 1fr;
}

.fourth {
  margin-left: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span>First</span>
    <span>Second</span>
    <span>Third</span>
    <span class="fourth">Fourth</span>
    <span>Fifth</span>
    <span>Sixth</span>
<div>

但这更加破碎了。是否只有CSS解决方案，如果没有，它是否可以用jQuery解决？