How do I make my grid template mobile-friendly? - html

Question

Right, I have a grid template lay out for my website where, on the desktop version, there are two columns. As this is shrunken down to a mobile version I would like this to be one column which fills the whole width of the device.
How would I go about doing this?
Here is the code below.
Thanks.
.grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
/*grid-template-rows: repeat(6, 1fr);*/
grid-template-rows:auto;
grid-template-areas:
"Title Content-Upper"
"Title Content-Lower";
grid-gap: 20px;
}
.Title{
grid-area: Title;
}
.Content-Upper{
grid-area: Content;
}
.Content-Lower{
grid-area: Content;
border-style: solid 2px black;
}
<div class="grid">
<div class="Title">
<div class="wrap__center">
<h1 style="font-size: 43px;" class="header__main" ><span id="">Title</span></h1>
</div>
</div>
<a href="#" class="Content content-update-ceo">
<h1 class="header__main">Uper Column</h1>
</a>
<a href="" class="Content content-update-covid">
<h1 class="header__main" style="width: 50%;">Lower Column</h1>
</a>
</div>

Answer 1

Grid systems can be affected with media queries just like any other CSS property. By default, you can set up a grid with one column, and then expand it to two columns when the viewport is wide enough. Note the changes to the grid-template-area definitions as well.
.grid {
display: grid;
/* one column with three rows for mobile */
grid-template-columns: auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"Title"
"Content-Upper"
"Content-Lower";
grid-gap: 20px;
}
#media (min-width: 768px) {
.grid {
/* two columns with two rows for tablet and up */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"Title Content-Upper"
"Title Content-Lower";
grid-gap: 20px;
}
}
.Title {
grid-area: Title;
}
.Content-Upper {
grid-area: Content;
}
.Content-Lower {
grid-area: Content;
border-style: solid 2px black;
}
<div class="grid">
<div class="Title">
<div class="wrap__center">
<h1 style="font-size: 43px;" class="header__main"><span id="">Title</span></h1>
</div>
</div>
<a href="#" class="Content content-update-ceo">
<h1 class="header__main">Uper Column</h1>
</a>
<a href="" class="Content content-update-covid">
<h1 class="header__main" style="width: 50%;">Lower Column</h1>
</a>
</div>

Answer 2

#media screen and (max-width: 414px) {
.grid{
grid-template-columns: repeat(1, 1fr);
}
}
It's as easy as that ;)