我是编码的新手，因此我一直坚持创建移动版本。我已经用display: grid编码了我的网站。我也有一个带有嵌套网格的区域。我的问题是如何使用col调整大小以适合手机屏幕？我调整了整个网站的移动视图，但没有调整该区域-就像普通的桌面屏幕一样，它的跨度非常合适。请帮忙！
我的CSS和HTML如下：
@media only screen and (max-width: 600px) { /* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#techu {
grid-area: techu;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "a1 a1 a1 a1" "a2 a3 a4 a5";
padding: 1em;
}
<div class="row">
<div class="col-xs-12 col-xm-12">
<section id="techu">
<div id="a1">
<h2>TechU</h2>
<p>Whether you’re experiencing problems with your computer, printer or network, we're here to help. Our Techsperts are certified in the repair of computer hardware, software and peripherals, and in the installation and maintenance of wired and wireless networks.</p>
</div>
<div id="a2">
<h3>Viruses, spyware, adware & pop-ups</h3>
<p>On a daily basis we see systems that are infected with viruses, trojans and spyware - there have never been so many malicious pieces of software around!</p>
<p>If you have a correctly configured system which receives regular updates and security patches then you're better protected from these common threats. We can help to stop these threats as well as offering you some safer surfing tips.</p>
</div>
<div id="a3">
<h3>Troublesome software</h3>
<p>In the majority of cases a computer problem turns out to be software related. These problems are often caused when unfriendly software is installed then removed. They can also be caused by incompatible drivers or software.</p>
<p>Due to the complexity of operating systems, the companies who develop them release regular updates to fix errors and potential security vulnerabilities in the original software. It's important to be using a correctly confugured device that receives regular updates.</p>
</div>
<div id="a4">
<h3>Troublesome hardware</h3>
<p>Some components wear out with use over time and simply need to be replaced. Any peripheral devices such as printers and scanners can fail to work correctly for many reasons.</p>
<p>We use industy approved techniques to diagnose, troubleshoot and remedy problems. If a part needs to be replaced, we'll advise on what we believe to be the most suitable options. In most cases we can fix or source and install an alternative component.</p>
</div>
<div id="a5">
<h3>Improved performance & reliability</h3>
<p>Technology is advancing at an alarming rate, and it's possible that the top of the range PC purchased 1 year ago is struggling to do what you want it to.</p>
<p>The good news is, you don't have to buy a new one to benefit from the latest technology. It's often a simple case of upgrading some of the internal components.</p>
<p>We offer a full upgrade service to best suite your needs and pocket.</p>
</div>
</section>
</div>
</div>