Angular 6: Implementing a dynamic photo grid using CSS

Question

Angular 6: Implementing a dynamic photo grid using CSS

I am looking to implement a dynamic grid list using Angular 6's *ngFor directive. I have an Array of 105 objects stored in firebase, each with the structure:

{src: 'some url', alt: 'title'}

These objects consist of two types of photos - horizontal and vertical. My goal is to create a section that automatically fills up empty space by utilizing a grid list in CSS3. How can I integrate this with the following code snippet:

<div class="row">
<div class="imageGallery1 " *ngFor="let image of galleryList">
  <a  [href]="image.src" [title]="image.alt">
    <img [src]="image.src" [alt]="image.alt" style="max-width: 300px; max-height: 300px; object-fit: contain; padding-right: 20px;" />
  </a>

</div>

Note: The styles provided are temporary for creating thumbnails.

Is there a way to identify the type of each photo (vertical or horizontal) and automatically sort them accordingly? Please advise if there is an alternative approach to achieving this.

css angular html

Answer 1

Answer №1

I stumbled upon a solution for grid layout using CSS on a YouTube course.

Check out the tutorial here

Here is the CSS code:

.row {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto;
  grid-auto-flow: dense;
}
.imageGallery1 {
  text-align: center;
  position: relative;

  & img {
    width: 100%;
    max-height: 510px;
    height: 251px;

  }
}

.vertical {
  grid-row: span 2;
  & img {
    height: 510px;
  }

}

Now, each vertical photo has its own class with grid-row: span 2;

Sharing this in case it can help someone else!

Answer 2

I stumbled upon a solution for grid layout using CSS on a YouTube course.

Check out the tutorial here

Here is the CSS code:

.row {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto;
  grid-auto-flow: dense;
}
.imageGallery1 {
  text-align: center;
  position: relative;

  & img {
    width: 100%;
    max-height: 510px;
    height: 251px;

  }
}

.vertical {
  grid-row: span 2;
  & img {
    height: 510px;
  }

}

Now, each vertical photo has its own class with grid-row: span 2;

Sharing this in case it can help someone else!

Angular 6: Implementing a dynamic photo grid using CSS

Answer №1

Similar questions

Building an Angular docker file is quite time-consuming

HTML5: Caption for Images: Movement of Image to Following Row

What is the best way to iterate through and keep track of components within an Angular 2

The preventDefault function fails to work in Firefox

Issue with JSON/Java not refreshing innerHTML when onClick event occurs

Guide on dynamically loading an external CSS file into a webpage

Sharing cookies between the browser and server in Angular Universal

How can I create a smaller clickable zone inside a div element?

The script fails to function on elements contained within an infinite scrolling feature

Preventing CSRF, XSRF, and XSS with Angular JWT stored in a Cookie

The div contains a scrollbar

Create the login/register interface for the personalized ApplicationUser model

What are some effective ways to manage repetitive HTML elements like headers and footers in Angular 4?

Generate a hard copy of the data table row without needing to view it beforehand

Adjust the CSS within a <style> element using jQuery or javascript

Angular 2 - 'Undefined' Error when using Http with Promises

A step-by-step guide to extracting an array from JSON data using Angular 2

The A-frame inspector tool is not very useful within the Glitch platform

Is there a term similar to "Rise above the Rest" in the world of Web Development?

Utilizing CSS3 Columns to control the flow of elements and enforce breaks