Here is a specific container I am working with:
#containerDiv {
display: 'grid'
grid-template-columns: 'repeat(6, auto)'
}
The issue I am facing is that the children within the container are taking up more space than their actual width.
What I am looking for is to have 6 child divs aligned while letting their width be determined by the content itself, without setting any min or max widths.
Picture the following scenario:
<div id="#containerDiv">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
I desire the width of each child div to adjust based on the content width, allowing me to use margins and paddings for styling. How can I achieve this?
Take a look at the code here: