Having created a specific grid layout using HTML and CSS, I am struggling to make it work across all devices. I have already created the CSS, but I seem to be missing something in the HTML, such as the col-md or col-sm classes from Bootstrap. However, every time I try to implement them, it still doesn't work properly. Can anyone help me with this issue?
.container { display: grid;
grid-template-columns: 285px 285px 285px 400px;
grid-template-rows: 142px 296px 259px 333px;
grid-auto-rows: 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas:
"A B C D"
"E B C D"
"F G H D"
"I I I I";
width: 1440px;
height: 1239px;
}
.A {
grid-area: A;
width: 259px;
height: 122px;
}
.B {
grid-area: B;
width: 259px;
height: 416px;
}
.C {
grid-area: C;
width: 259px;
height: 416px;
}
.D {
grid-area: D;
width: 380px;
height: 668px;
}
.E {
grid-area: E;
width: 259px;
height: 273.87px;
}
.F {
grid-area: F;
width: 259px;
height: 230px;
}
.G {
grid-area: G;
width: 259px;
height: 230px;
}
.H {
grid-area: H;
width: 259px;
height: 230px;
}
.I {
grid-area: I;
width: 1252px;
height: 335px;
}
html, body {
height: 100%;
margin: 0;
}
.container * {
border: 1px solid red;
position: relative;
}
.container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
}
@media (min-width: 575.98px) {
.container { grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 767.98px) {
.container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 991.98px) {
.container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1199.98px) {
.container { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1399.98px) {
.container { grid-template-columns: repeat(4, 1fr); }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<title>This is an example</title>
<link rel="stylesheet" type="text/css" href="/dashboard.css">
</head>
<body>
<section class="content">
<div class="container">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
<div class="H"></div>
<div class="I"></div>
</div>
</section>
</body>
</html>I have attempted to use col-sm-3, col-md-3, col-lg-3, col-xl-3 in the HTML, but it has not produced the desired outcome;