Flex-Box Or Grid: How to align columns across multiple rows? - html

Question

I created an example with react:
Code Sandbox
As you can see here:
The columns are not aligned because of the dynamic width of each column.
What do I need to do if I want all the columns to stay aligned across all rows even when they need to shrink closer together because of the window size?
EDIT
Same problem with css-grid:
Code Sandbox 2

Answer 1

I modify your INDEX.TSX
class OrderRow extends React.Component<OrderRowProps> {
public render() {
const { index, order } = this.props;
return (
<div className="OrderRow">
<div className="OrderRowIndex">{index}</div>
<div className="columnGroup">
<OrderColumn values={order.number} />
<OrderColumn values={order.size} />
<OrderColumn values={order.amount} />
<OrderColumn values={order.price} />
<OrderColumn values={order.page} />
</div>
</div>
);
}
}
Also I Change many CSS.
*,
*:after,
*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
margin: 0;
padding: 15px;
}
.Chunk {
flex-basis: 30px;
flex-grow: 0;
flex-shrink: 0;
max-width: 30px;
height: 30px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
line-height: 30px;
}
.OrderColumn {
display: flex;
flex-direction: row;
justify-content: flex-end;
min-width: 300px;
max-width: 500px;
}
.columnGroup{
flex-basis: calc(100% - 30px);
flex-grow: 0;
flex-shrink: 0;
max-width: calc(100% - 30px);
display: flex;
flex-direction: row;
justify-content: space-between;
}
.OrderColumn:first-child{
justify-content: flex-start;
}
.OrderRow {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.OrderRow > div {
/* flex: 1 1 0px; */
padding-left: 5px;
padding-right: 5px;
}
.OrderRowIndex {
flex-basis: 30px;
flex-grow: 0;
flex-shrink: 0;
max-width: 30px;
height: 30px;
/* margin-left: 5px;
margin-right: 5px; */
border: 1px solid black;
text-align: center;
vertical-align: middle;
display: inline-block;
line-height: 30px;
}
.Order {
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 100%;
overflow-x: auto;
}
Here is your CodeSanBox. Now it's look like this.

Answer 2

The following is a solution I can live with:
Code Pen
Im using a grid with gridTemplateColumns being a minmax of minum pixel size and fr notation. Im still annoyed by the minimum pixel width because it is not dynamic. I would prefer if the minium width is always fitting to its content. So if there are 2 cells in a column it should be minimum of 60, if there are 3 it should be 90, and so on. So 30 px per cell.