how to make a grid mobile responsive in react - css

Question

I have to make videos in the grid to appear horizontally one after the other when seen in a mobile(mobile responsive) but they should stay vertically aligned in desktop view.
i have tried giving values to 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
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 {
grid-column: auto;
grid-row: 1;
}
.two {
grid-column:auto;
grid-row: 1;
}
.three {
grid-column: auto;
grid-row: 1;
}

Answer 1

As you tagged your post with bootstrap-4 I'll assume you use it.
Bootstrap has all you need, look at the grid system: https://getbootstrap.com/docs/4.3/layout/grid/
In your case you can use it like this:
return (
<div className="container">
<h1 className="text">trending in youtube</h1>
<div className="row justify-content-center">
<div className="col-xs-12 col-md-4">
<YouTube
videoId="y6fThXQPT6I"
opts={opts}
onReady={this._onReady}
/>
</div>
<div className="col-xs-12 col-md-4">
<YouTube
videoId="bo_efYhYU2A"
opts={opts}
onReady={this._onReady}
/>
</div>
<div className="col-xs-12 col-md-4">
<YouTube
videoId="3AtDnEC4zak"
opts={opts}
onReady={this._onReady}
/>
</div>
</div>
</div>
);
No more CSS needed 😉

Answer 2

You can Use grid-auto-flow:
.grid-container {
display: grid;
grid-gap: 5px;
grid-auto-flow: row; /* appear Vertically*/
justify-items: center;
}
#media (max-width: 767px) {
.grid-container {
grid-auto-flow: column; /* appear Horizontally on mobile phones*/
}
}
Example About css grid-auto-flow property: When you run the snippet it will appear horizontally, but if you opened it as full screen it will appear vertically.
.grid-container {
display: grid;
grid-gap: 5px;
grid-auto-flow: row;
justify-items: center;
}
#media (max-width: 767px) {
.grid-container {
grid-auto-flow: column;
}
}
.item {
width: 250px;
height: 100px;
}
.one {
background-color: lightblue;
}
.two {
background-color: lightpink;
}
.three {
background-color: lightcoral;
}
<div class="grid-container">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
</div>