I would like to push CSS Grid to limits and handle as much as I can without using javascript login. I understand that I will certainly have to use javascript, but I am trying to push the limits.

• The main grey parent has 4 columns (in this example). We use a repeat(auto-fill, 1fr) for grid column template.
• The ORDER is a customer order that can one or more PRODUCTS
• We want the ORDER to be a default of grid-column: 1
• We would also like ORDER to make use of PRODUCTS by extending from grid-column: 1 / span 2 - grid-column: 1 / 3 and so on.
• Also, the parent needs to keep track of these when more ORDERs are created.

Here are some example images below to show what I need to happen. Again, I understand javascript might need to be a factor, but I want to push grid as well.

Here are some example styled components. Orderlanes is a grid that repeats based on minmax width. OrderContainer I was trying to manually set grid-column: 1 / span 3, just to see what happens.

export const OrderLanes = styled.section`
  display: grid;
  grid-area: order-lanes;
  grid-column-gap: 2px;

  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-template-rows: 1fr;

  max-height: calc(100vh - 300px);
  background-color: lightgray;
`;

export const OrderContainer = styled.div`
  border: 2px solid black;
  background-color: lightblue;

  display: grid;
  grid-column: 1 / span 3; // I WOULD LIKE THIS TO BE AUTO
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
`;

export const Product = styled.div`
  background-color: tomato;
  margin: 2px;
`;

export const ProductItem = styled.section`
  background-color: green;
  text-align: center;
  height: 25px;
  margin: 1px;
`;