Me gustaría llevar CSS Grid al límite y manejar todo lo que pueda sin usar el inicio de sesión de JavaScript. Entiendo que ciertamente tendré que usar javascript, pero estoy tratando de superar los límites.

• El principal gris principal tiene 4 columnas (en este ejemplo). Usamos una repeat(auto-fill, 1fr) para la plantilla de columna de cuadrícula.
• El PEDIDO es un pedido de cliente que puede contener uno o más PRODUCTOS
• Queremos que ORDEN sea un valor predeterminado de grid-column: 1
• También nos gustaría ORDEN para hacer uso de PRODUCTOS extendiendo desde grid-column: 1 / span 2 - grid-column: 1 / 3 y así sucesivamente.
• Además, el padre debe realizar un seguimiento de estos cuando se crean más PEDIDO.

Aquí hay algunas imágenes de ejemplo a continuación para mostrar lo que necesito que suceda. Nuevamente, entiendo que javascript podría ser un factor, pero también quiero impulsar la cuadrícula.

Aquí hay algunos ejemplos de componentes con estilo. Orderlanes es una cuadrícula que se repite en función del ancho mínimo. OrderContainer Estaba tratando de configurar manualmente grid-column: 1 / span 3, solo para ver qué sucede.

 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; `;