I need help creating a table structure using CSS flexbox
Check out my CodePen here for reference
I have elements spaced using justify-content: space-between; in a container, but I want to remove the space between the divs so they sit next to each other.
I tried making the cell width 100% but then I lose control over the cells' widths.
*{
font-family: sans-serif;
}
.content-wrapper,
.content-header{
display: contents;
}
.content-header{
.grid-cell{
font-weight: bold;
}
}
.grid-wrapper{
border: 1px solid grey;
}
.grid-cell{
padding: 5px;
border: 1px solid lightgrey;
white-space: no-wrap;
}
.grid-header,
.grid-content{
display: flex;
justify-content: space-between;
//align-content: stretch;
}
.grid-cell-1{
flex-basis: 80px;
}
.grid-cell-2{
flex-basis: 68px;
}
.grid-cell-3{
}
.grid-cell-4{
flex-basis:58px;
}
.grid-cell-5{
flex-basis: 58px;
}
.grid-cell-6{
flex-basis: 58px;
}
.grid-cell-7{
flex-basis: 58px;
}
.grid-cell-8{
flex-basis: 58px;
}
.grid-cell-9{
flex-basis: 58px;
}
.grid-cell-10{
flex-basis: 58px;
}
.grid-cell-11{
flex-basis: 58px;
}
.grid-cell-12{
flex-basis: 58px;
}
.grid-cell-13{
flex-basis: 58px;
}
@media(max-width: 700px){
.grid-header{
display: none;
}
.grid-content{
display: initial;
}
.grid-cell{
display: inline;
}
.grid-content{
display: flex;
}
.content-wrapper{
display: initial;
}
.content-header{
display: block;
}
}