Bdtjtk

I have a range of products in categories that i need printed on paper as a order sheet.

My idea was to get the following layout (landscaped):

Page 1:

+-----------+

| 1 | 4 | 7 |

| 2 | 5 | 8 |

| 3 | 6 | 9 |

+-----------+



Page 2:

+-----------+

| 10| 13| 16|

| 11| 14| 17|

| 12| 15| 18|

+-----------+

The CSS I've tried so far does not work for me.

Current CSS:

<style type="text/css">

    @media print {

        .noprint {

            display:none;

        }

    }



    .info {

        width: 100%;

        padding: 25px;

        font-size: 20px;

        border: 3px solid #000;

        text-align: center;

        margin-bottom: 30px;

    }



    .image {

        text-align: center;

        padding: 20px;

    }



    * {

        box-sizing: border-box;

    }



    body {

        font-family: verdana;

        font-size: 12px;

    }



    .category {

        column-count: 3;

        column-gap: 20px;

    }



    .items {

        column-count: 3;

        column-gap: 20px;

        column-fill: auto;

        height: 80vh;

    }



    .page {

        page-break-after: always;

        clear: both;

    }



    .item {

        width: 100%;

        margin: 0;

    }



    .header {

        width: 100%;

    }



    .header > * {

        float: left;

        background-color: #E0E0E0;

        padding: 5px;

    }



    .name_header {

        width: 70%;

        font-weight: bold;

        text-align:center;

        font-size: 15px;

        float: left;

    }



    .pieces_header {

        width: 30%;

        font-weight: bold;

        text-align:center;

        font-size: 15px;

        float: left;

    }



    .product {

        width: 100%;

        margin: 0;

        -webkit-column-break-inside: avoid; /* Chrome, Safari */

        page-break-inside: avoid;           /* Theoretically FF 20+ */

        break-inside: avoid-column;         /* IE 11 */

        display:table;

        border-top: 1px solid #000;

        border-bottom: 1px solid #000;

    }



    .name {

        width: 50%;

        float: left;

        height: 40px;

        line-height: 40px;

    }



    .price {

        width: 25%;

        float: left;

        height: 40px;

        line-height: 40px;

        text-align: right;

    }



    .pieces {

        width: 25%;

        float: left;

        height: 40px;

    }



    .barcode {

        width: 100%;

        text-align: center;

    }

</style>

.page is inserted for every 25. product as a

Each .barcode div holds a products EAN13 as XML.

One product loop:

<div class="items">

    <div class="item header">

        <div class="name_header">Andet</div>

            <div class="pieces_header">Antal</div>

        </div>

        <div class="item product">

            <div class="name">13</div>

            <div class="price">kr. 29,95</div>

            <div class="pieces"></div>

            <div class="barcode">

            </div>

        </div>

    </div>

</div>

Here's an example that works on screen, and should work in print:

body { margin: 0 }



@media screen {

   .container {

     display: flex;

     flex-direction: column;

     height: 100vh;

     flex-wrap: wrap;

   }

   .container div {

     box-sizing: border-box;

     height: 33.3vh;

     border: 1px solid red;

   }

}



@media print {

   .container {

     display: flex;

     flex-direction: column;

     height: 100vh;

     flex-wrap: wrap;

   }

   .container div {

     box-sizing: border-box;

     height: 33.3vh;

     border: 1px solid red;

   }

}

<div class="container">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

  <div>9</div>

</div>

Note I have not used your code in order to keep the mechanics clear. See it working here:

http://jsfiddle.net/tobyl/bec6sryf/10/

Something to bear in mind, since you have a specific page size you'd like to target, in print you can always specify the dimensions in millimetres:

@media print {

   .container {

     display: flex;

     flex-direction: column;

     height: 297mm;

     flex-wrap: wrap;

   }

   .container div {

     box-sizing: border-box;

     height: 99mm;

     width: 70mm;

     border: 1px solid red;

   }

}

Again, this is pseudo code - in reality, you'll want to account for headers and footers and margins, but this should provide a good starting point.