3 divs with 2nd and 3rd off the screen

Issue

I want to display 3 divs horizontally side-by-side.

here's my markup

html

<div class="fluid">
    <section id="div1"></section>
    <section id="div2"></section>
    <section id="div3"></section>
</div>

And my CSS.

CSS

.fluid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    width: 300%;
    border: solid red 1px;
    overflow-x: scroll;
}
#div1 {
    width: 100%;
    grid-column: 1/span 1;
}
#div2 {
    width: 100%;
    grid-column: 2/span 1;
}
#div3 {
    width: 100%;
    grid-column: 3/span 1;
}

I'm open to any strategy, flex, grid, position, or float.

Issue: The issue I have is that div2 peeks throughs the window.

Context: I'm building this layout (master-detail-subdetail) for mobile screen under media query max-width: 767px.

Solution

You only need two lines for this grid-auto-flow: column;grid-auto-columns: 100%;

.fluid {
  display: grid;
  grid-auto-flow: column; /* a column flow*/
  grid-auto-columns: 100%; /* all the columns equal to parent container */
  border: solid red 1px;
  overflow-x: scroll;
}

.fluid  section {
  height: 100px;
  border: 1px solid;
}

<div class="fluid">
  <section id="div1"></section>
  <section id="div2"></section>
  <section id="div3"></section>
</div>

Answered By - Temani Afif