我想水平并排显示3个div。

这是我的标记

html

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

还有我的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;
}

我对任何策略、灵活性、网格、位置或浮动都持开放态度。

问题 :我的问题是div2从窗口窥视。

上下文 :我正在为媒体查询下的移动屏幕构建这个布局(主细节子细节)最大宽度:767px。