page breaks with columns

Question

how it should look on a page, just basic lookI have an app that I can customize my own code with to have it do what fits my needs. It use to print correctly but suddenly stopped. I have it printing picking orders and need them in a specific order, which it is doing.

The issue is now it is putting as many orders as it can fit to the page, it should only have 10 max to page. I sometimes will print 40 or more orders at a time.

It is two columns with 5 or 6 orders on the left side and 5 or 4 on the right side (doesn't matter which to me) but when it goes to the next page it is only showing orders on the right column.

I am not sure this makes sense but will share the code below.

@media print {
  @page {
    size: 215.9mm 279.4mm;
    margin:0;
    padding:0;
  } 
  
.product-container:nth-child(10n) {
   page-break-after: always;
}

}

.liquidated {
  column-count: 2;
  column-gap: 0px;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: black;
  font-size:14px;
  page-break-after: always;
}

.product-container:nth-child(6n){
    page-break-after: always;
}

.product-wrapper {
    border-bottom: 2px solid black;
    padding:5px;
    break-inside: avoid-column;

}
.order-index {
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.circle {
    height: 25px;
    width: 25px;
    border-radius: 64px;
    flex-shrink: 0;
    position: relative;
    border-style: solid;
    border-width: 1px;
    padding-top: 2px;
}

.number{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.ordername {
    font-weight: bold;
}

.checkbox {
    border: 1px solid black;
    padding:5px;
    margin:0px;
    display:inline-block;
    top: 1px;
    position:relative;
}

.container {
  max-width: 100%;
}

Here is HTML

{% assign sort_orders = orders | sort: 'total_weight' %}
{% for order in sort_orders %}
 {% assign items_count = 0 %}
    {% for lineitem in order.line_items %}
        {% assign items_count = items_count | plus: lineitem.quantity %}   
    {% endfor %}  
    <div class="product-container">
        
    {% if items_count %}
        <div class="product-wrapper">
            
            <span class="ordername">{{ order.name }}</span>
            {% assign sorted_lineitems = order.line_items | sort : 'sku' %}
            {% for lineitem in sorted_lineitems %}
                  <div class="product">
                    {% assign variant_title = lineitem.variant_title %}
                     {% if variant_title != "Default Title" %}
                       <span class="checkbox"></span> {{ variant_title }}
                    {% endif %} 
                     ({{ lineitem.quantity }})

                    </div>
            {% endfor %}
            
            <b>{{ "Total quantity: " }}</b> {{ items_count }} pcs
            
            <b>Weight</b> {{ order.total_weight | divided_by: 1000 | times: 35.27 | round: 2 }} oz
            
            <div class="order-index">
                <div>{{ order.shipping_address.first_name }} {{ order.shipping_address.last_name }}</div>
                <div class="circle">
                     <span class="number">{{ forloop.index }}</span>
                </div>
            </div>
        </div>
    {% endif %}
    </div>
{% endfor %}

I have tried different page break terms and searched all over the net and youtube to not find a solution.

Answer 1

ok so want this type of layout then here is what you need to do let suppose you looping div is **product-wrapper** add this Css

.product-wrapper{
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;
}

this css will help you achive your desire desgin