I am a beginner in the world of programming and web development. Currently, I am working on building my own personal website.
My goal is to arrange boxes in a grid with 4 columns, similar to the layout you can find at this link:
Each box represents an object, and I would like to display some data within the box while showing additional details in a popup dialog upon clicking the box.
I have been experimenting with CSS grid layouts, which are gaining popularity nowadays (I highly recommend watching this video: https://www.youtube.com/watch?v=7kVeCqQCxlk).
I have managed to achieve the desired layout by hardcoding a set of div elements inside a wrapper div for each box. However, when trying to use *ngFor on the wrapper containing an array of data and passing the data from each iteration to an inner div element, the grid layout breaks and all items appear in a single column.
Manually inputting the data using multiple div elements (item2) works as intended:
.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>However, when using *ngFor... it loops through the "stickyNotes" array's length but aligns the boxes underneath each other instead of side by side in rows.
<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>One workaround I tried was having this div element repeated 4 times by incrementing i with *ngIf (i+1, i+2, etc.). The issue is that at the start of a new row, the grid-row-gap defined in CSS is not applied.
<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>
<!--Repeat two more times until i+3-->I am exploring the possibility of creating a custom iterable directive without compromising the grid setup or duplicating the item2 class multiple times.
I have also experimented with Bootstrap's row and col attributes, but the responsiveness did not match up to the neatness of the grid layout with 4 columns.
Any assistance or pointers in the right direction would be greatly appreciated!