title: horizontal scroll for css grid-layout
body: <p>I need to have different layouts for a dashboard. I need only horizontal scroll for layout-container if the items exceed to fit in a visible viewport. I came across a layout with the following requirements.</p>
  
  <p><a href="https://i.stack.imgur.com/ZDWWQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZDWWQ.png" alt="This is the layout I required"></a></p>
  
  <p>I have created the layout style using CSS-flexbox, but could not get the horizontal scroll, got the vertical scroll only.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    margin: 0px;
  }
  * {
    box-sizing: border-box;
  }
  .flexbox {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    background-color: lightgreen;
  }
  .item {
    min-width: 50%;
    min-height: 50%;
    flex: 1 0 0;
    border: 1px solid;
  }
  .item:nth-child(odd) {
    background-color: lightblue;
  }
  
  .item:nth-child(even) {
    background-color: lightslategray;
  }
  .item1 {
    min-width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flexbox"&gt;
    &lt;div class="item item1"&gt;1&lt;/div&gt;
    &lt;div class="item item2"&gt;2&lt;/div&gt;
    &lt;div class="item item3"&gt;3&lt;/div&gt;
    &lt;div class="item item1"&gt;4&lt;/div&gt;
    &lt;div class="item item2"&gt;5&lt;/div&gt;
    &lt;div class="item item3"&gt;6&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/TechnoGeek/pen/GdZodo" rel="nofollow noreferrer">https://codepen.io/TechnoGeek/pen/GdZodo</a></p>
  
  <p>So, I thought, CSS grid can help with this. So I tried something but did not understand how to get it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    margin: 0px;
  }
  
  .grid {
    display: grid;
    height: 100%;
    background-color: lightgreen;
    grid-template-columns: repeat(2, 1fr);
    grid-template-row: repeat(2, 1fr);
    grid-gap: 5px;
    /*   grid-auto-flow: column; */
  }
  
  .item {
    border: 1px solid;
  }
  
  .item:nth-child(odd) {
    background-color: lightblue;
  }
  
  .item:nth-child(even) {
    background-color: lightslategray;
  }
  
  .item1 {
    grid-column: 1/3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="item item1"&gt;1&lt;/div&gt;
    &lt;div class="item item2"&gt;2&lt;/div&gt;
    &lt;div class="item item3"&gt;3&lt;/div&gt;
    &lt;div class="item item1"&gt;4&lt;/div&gt;
    &lt;div class="item item2"&gt;5&lt;/div&gt;
    &lt;div class="item item3"&gt;6&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/TechnoGeek/pen/BxKoaG" rel="nofollow noreferrer">https://codepen.io/TechnoGeek/pen/BxKoaG</a></p>
  
  <p>In the grid layout, items are shrinking to fit within the layout.</p>
  
  <p>The number of items inside the container is dynamic. Irrespective of the item count the layout must maintain the structure for each visible group. </p>
  
  <p>Can someone help how to achieve this?</p>
  
  <p>Thanks in advance.</p>