I am styling my website with css grid. It works fine in standard browser in my computer. But, in my mobile device (android 5) is not work properly. My website is not displaying a grid design. Its displaying just single column.
I am stuck on this. Please help. Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
background: #2196F3;
padding: 0px;
margin: 0px;
}
.grid-item {
border: 1px solid #000;
margin: 0px;
padding: 0px;
padding-top: 100%;
}
.grid-item:nth-child(odd) {
background: red;
}
.grid-item:nth-child(even) {
background: blue;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
