<div class="grid-container2">
<div class="grid-item2">Column 1</div>
<div class="grid-item2">Column 2</div>
</div>
.grid-container2 {
display: grid;
grid-template-columns: 100%;
background-color: #333333;
padding: 10px;
width: 100%;
}
.grid-item2 {
background-color: white;
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
}
@media screen and (min-width:700px){
.grid-container2 {
display: grid;
grid-template-columns: 49.5% 49.5%;
background-color: #333333;
padding: 10px;
column-gap: 1%;
width: 100%;
}
.grid-item2 {
background-color: white;
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
}
}
<div class="grid-container3">
<div class="grid-item3">Column 1</div>
<div class="grid-item3">Column 2</div>
<div class="grid-item3">Column 3</div>
</div>
.grid-container3 {
display: grid;
grid-template-columns: 100%;
background-color: #333333;
padding: 10px;
width: 100%;
}
.grid-item3 {
background-color: white;
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
}
@media screen and (min-width:700px){
.grid-container3 {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
background-color: #333333;
padding: 10px;
column-gap: 1%;
width: 100%;
}
.grid-item3 {
background-color: white;
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
}
}
<div class="grid-container4">
<div class="grid-item4">Column 1</div>
<div class="grid-item4">Column 2</div>
<div class="grid-item4">Column 3</div>
<div class="grid-item4">Column 4</div>
</div>
.grid-container4 {
display: grid;
grid-template-columns: 100%;
background-color: #333333;
padding: 10px;
width: 100%;
}
.grid-item4 {
background-color: white;
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
}
@media screen and (min-width:700px){
.grid-container4 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: #333333;
padding: 10px;
column-gap: 1%;
width: 100%;
}
.grid-item4 {
background-color: white;
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
}
}