How to make my two columns responsive? - html

Question

I am displaying two columns in the center of my grid with contents and I need to make these two columns above each other in mobile view how I can do that?
.two-pics {
display: grid;
grid-gap: 50px;
grid-template-columns: 400px 400px;
object-fit: cover;
color: #444;
margin-top: 100px;
justify-content: center;
}
.box {
background-color: white;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
.a {
grid-column: 1;
grid-row: 1 / 12;
}
.b {
grid-column: 2;
grid-row: 1 / 12;
}
<div class="two-pics">
<div class="box a">
<img src="assets/images/pic1.jpg">
<br>
<p>title</p>
<ul>
<li></li>
<li>dfgdfghdfhdfh</li>
<li>dfgdfghdfhdfh</li>
<li>dfgdfghdfhdfh</li>
</ul>
</div>
<div class="box b">
<img src="assets/images/pic2.jpg">
<br>
<p>ldkjh ldkjfh ldk hjf</p>
</div>
</div>

Answer 1

Using the auto-fit property you can create as many 400px grid tracks as will fit in the container.
codepen
body {
background: grey;
}
.two-pics {
display: grid;
grid-gap: 50px;
grid-template-columns: repeat(auto-fit, 400px);
color: #444;
margin-top: 100px;
justify-content: center;
}
.box {
background-color: white;
color: #000;
border-radius: 5px;
font-size: 150%;
}
<div class="two-pics">
<div class="box a">
<img src="https://unsplash.it/400">
<br>
<p>title</p>
<ul>
<li>dfdfd</li>
<li>dfgdfghdfhdfh</li>
<li>dfgdfghdfhdfh</li>
<li>dfgdfghdfhdfh</li>
</ul>
</div>
<div class="box b">
<img src="https://unsplash.it/400">
<br>
<p>ldkjh ldkjfh ldk hjf</p>
</div>
</div>