CSS Equal Width Elements
Parent Expanding to the Size of Child Elements
.container {
display: grid;
// Fits columns to the available space, with a min width of 100px
// and a max width of 1 fraction of the container
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 8px;
min-width: 150px;
}
Child Elements Filling Parent
.container{
display: flex;
gap: 8px;
min-width: 150px;
.child {
// flex: {flex-grow} {flex-shrink} {flex-basis}
// Using flex-basis of 0, all elements have the same starting point
flex: 1 1 0;
}
}