My HTML document contains two child HTML elements within the parent HTML. The parent HTML has a div with a class of .page, which is a large area for the children to occupy. Both children are of the same size and I need them to spawn in a specific order; for example, the first child component will be positioned at 1, and the next child should follow suit, either occupying space on the left or below if there is no room to the left.
Desired layout:
https://i.stack.imgur.com/vbC8J.png
Current layout:
https://i.stack.imgur.com/ulmfc.png
The CSS styling:
.page {
display: flex;
width: 26.4cm;
height: 37cm;
flex-wrap: wrap;
align-content: flex-start;
overflow: hidden;
}
Children's grid setup:
.displayGridSlip {
display: grid;
width: 13cm;
grid-template-columns: 13cm;
grid-template-rows: 1.7cm 4.9cm 0.5cm;
grid-template-areas:
"h"
"b"
"f";
border-bottom-style: dashed;
border-bottom-width: 0.3mm;
border-right-style: dashed;
border-right-width: 0.3mm;
padding-top: 0.2cm;
}
Main HTML code snippet:
<div *ngFor="let itemCapa of arraySlips.capa; let k = index;">
<div class="page">
<app-slip-capa [itemCapa]="itemCapa"></app-slip-capa>
<app-slip-conteudo [item]="arraySlips.info" [itemCapa]="itemCapa"></app-slip-conteudo>
</div>
</div>