Below are the code snippets provided:
.grades_dashboard_m {}
.three_separation {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 60px;
}
.grades_dashboard_box {
height: 130px;
width: 160px;
background-color: #000000;
color: #ffff;
}<div class="grades_dashboard_m" id="co_1">
<div class="three_separation">
<div class='grades_dashboard_box'>
<h1>12</h1>
</div>
<div class='grades_dashboard_box'>
<h1>12</h1>
</div>
<div class='grades_dashboard_box'>
<h1>12</h1>
</div>
</div>
</div>The issue is with centering the grid div (grades_dashboard_m) without affecting the elements in it. The attempted solution using flexbox did not work as expected.
UPDATE: I have identified that the problem lies in centering the content within the three grids. How can I effectively center the content of these grids?