I am in the process of developing a layout for print material on sticker labels. To achieve this, I have created a div element and applied the display:grid; property to customize the space allocation. My goal is to make item1, item2, and item3 overlap each other while being centered within their respective cells.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 70mm; // This may not be needed
align-items: center;
}
.cell {
border-style: dashed;
width: 100mm;
height: 70mm;
align-content: center;
}
.item1 {
z-index: 0;
width: 40mm;
height: 40mm;
background-color: red;
position: relative;
}
.item2 {
z-index: 1;
width: 20mm;
height: 20mm;
background-color: blue;
position: relative;
}
.item2 {
z-index: 2;
width: 10mm;
height: 10mm;
background-color: green;
position: relative;
}<div class="grid">
<div class="cell">
<div class="item1"></div>
<div class="item2"></div>
<img class="item3" src="./src.png" />
</div>
<div class="cell">
<div class="item1"></div>
<img class="item2" src="./src.png" />
<div class="item3"></div>
</div>
<div class="cell">
<div class="item1"></div>
<img class="item2" src="./src.png" />
<div class="item3"></div>
</div>
</div>I am struggling to achieve the desired outcome: a grid with items perfectly centered both horizontally and vertically within each cell. The cell size must be precise (100mmx70mm) with a layout of 2 cells per row to fit the printed page.
If there is anyone with CSS expertise in the audience who can assist me, I would greatly appreciate it.