create a sticker label with 3x8 size with CSS

Viewed 19

I am having trouble with CSS creating 24 identical information on 3x8 (70x37mm) size.
I can adjust the size and margin to make everything fit inside the box but im having no luck on creating 3x8 (70x37mm) size box.

if I just set the width: 70mm; and height: 37mm ; everything gets on top of each other...

My data inside the 70x37mm-box is below:

let labellist = [];
 for (let i = 1; i <= 24; i++) {
        <div className="label-main" key={i}>
            <p className="item_name">{item_name}</p>
            <p className="Check_Date">Tillv:{Check_Date}</p>
              <strong>
                <i className="Batch_number">
                  batch# {Batch_number} 
                </i>
              </strong>
            <div className="row no-gutters ">
              <div className="col-8 ">
                <p className="Expire_Info"> {Expire_Info}</p>
                <p className="prodcution">
                  <p>{type}</p>
                  <p>{address 1} </p>
                  <p>{address 2}</p>
                  <p> {email} </p>
                  <p className="OBS">{OBS}</p>
                </p>
              </div>
              <div className="col-4">
                {
                  <QRCode
                    value={Content}
                    renderas="svg"
                    style={{
                      width: "80px",
                      height: "80px",
                    }}
                  />
                }
              </div>
            </div>
          </div>
}
      return labellist;


 return (
<div>
 <div className="container">{renderLable()}</div>
</div>
)

0 Answers
Related