My goal is to ensure that the videos displayed in a grid appear horizontally one after the other on mobile devices, while maintaining a vertical alignment on desktop view.
I have experimented with setting values for rows and columns as "auto".
return (
<div>
<h1 className="text">trending in youtube</h1>
<div className="grid-container">
<div className="one">
<YouTube
videoId="y6fThXQPT6I"
opts={opts}
onReady={this._onReady}
/>
</div>
<div className="two">
<YouTube
videoId="bo_efYhYU2A"
opts={opts}
onReady={this._onReady}
/>
</div>
<div className="three">
<YouTube
videoId="3AtDnEC4zak"
opts={opts}
onReady={this._onReady}
/>
</div>
</div>
</div>
);
}
CSS File:
.grid-container {
display: grid;
grid-template-columns: repeat(auto, 1fr);
grid-gap: 5px;
grid-auto-rows: minmax(100px, auto);
}
.text {
margin-top: 50px;
margin-left: 40%;
}
.one, .two, .three {
grid-column: auto;
grid-row: 1;
}