I am new to programming and web dev in general. I am in the process of making a personal website.
I want to put boxes in a grid with 4 columns, similar to what you see here: https://devpost.com/software/search?query=is%3Afeatured
Each of these boxes represents an object, and I want to be able to display some of the data into the box, and the rest of data in a popup dialog when you click on the box.
I have been playing around with the CSS grid layout, which is becoming popular these days (highly recommend this video: https://www.youtube.com/watch?v=7kVeCqQCxlk).
The thing with 4 columns work when I hardcode bunch of div elements inside a wrapper div. However, whenever I use *ngFor on the wrapper containing my array of data and feed in the data from each iteration to an inner div element, the grid layout gets destroyed, placing everything into one column.
When I manually feed in the data using multiple div elements (item2 here), it works as desired:
.wrapper {
margin-left: 1em;
margin-right: 1em;
display: grid;
grid-template-rows: auto;
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 1em;
grid-column-gap: 1em;
}<div class="wrapper">
<div class="item2" style="background-color: deepskyblue;">
<img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
<p>more text here.</p>
</div>
<div class="item2" style="background-color: deepskyblue;">
<img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
<p>more text here.</p>
</div>
<div class="item2" style="background-color: deepskyblue;">
<img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
<p>more text here.</p>
</div>
<div class="item2" style="background-color: deepskyblue;">
<img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
<p>more text here.</p>
</div>
<div class="item2" style="background-color: deepskyblue;">
<img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
<p>more text here.</p>
</div>
</div>Using *ngFor... it runs for the length of the array "stickyNotes," but stacks the boxes only below each row.
<div class="wrapper" *ngFor="let s of stickyNotes; let i = index" >
<div class="item2" style="background-color: deepskyblue;">
<img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
<p>more text here.</p>
<p>{{s.title}}</p>
</div>
</div>My hack around this was... have this div element 4 times with i incrementing by 1 on *ngIf (i+1, i+2, etc.). Problem here is that when a new row starts, grid-row-gap in CSS is ignored.
<div class="item2" style="background-color: deepskyblue;" *ngIf="i < stickyNotes.length && i%4 === 0">
<img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
<p>more text here.</p>
<p>{{stickyNotes[i].title}}</p>
</div>
<div class="item2" style="background-color: deepskyblue;" *ngIf="i+1 < stickyNotes.length && i%4 === 0">
<img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" >
<p>more text here.</p>
<p>{{stickyNotes[i+1].title}}</p>
</div>
<!--2 more times until i+3-->I am wondering if there is a way to create a custom iterable directive without destroying the grid property and without having the item2 class coded 4 times (or any other methods).
I have tried bootstrap row and col attributes, but with 4 columns, the responsiveness wasn't as nice as the grid layout.
Any help or suggestion would be appreciated!