I have a simple flex-box layout with a container like:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
I know there are many answers here but.. The simplest way to do this is with a grid
instead of flex
and grid template columns
with repeat
and auto fills
, where you have to set the number of pixels that you have given to each element, 100px
from your snippet code.
.exposegrid {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}