#panelb {
background: lightblue;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
}
.card {
background: gold;
}
.imgcard {
display: block;
width: 100%;
margin: 0 auto;
}<div id='panelb'>
<div class='card'>
<img class='imgcard' src='imglink/01.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
<div class='card'>
<img class='imgcard' src='imglink/02.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
... and so on - about 50 cards
</div>Despite the functionality of the code provided, there is a desire to center the panelb consistently on the page with adaptive width and even margins on both sides.
An attempt to utilize display:inline-block; to achieve this was unsuccessful due to the current application of display:grid.
In addition, setting margin: 0 auto did not resolve the issue as it resulted in the width always being 100% or another specified value, regardless of the number of cards per row.
If anyone has any suggestions or solutions, your input would be greatly appreciated.