perjansson

import { routerTransition } from 'router.animations'
...

@Component({
  selector: '...',
  styleUrls: ['...'],
  templateUrl: './app.template.html',
  animations: [routerTransition],
})
export class AppComponent {

perjansson

<main [@routerTransition]="getPageTransition(routerOutlet)">
  <router-outlet #routerOutlet="outlet"></router-outlet>
</main>

perjansson

import {
  sequence,
  trigger,
  stagger,
  animate,
  style,
  group,
  query as q,
  transition,
  keyframes,

perjansson

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { AppComponent } from 'app.component'
...

@NgModule({
  imports: [BrowserAnimationsModule, ...],
  declarations: [AppComponent, ...],
  bootstrap: [AppComponent]
})
export class AppModule { }

perjansson

const specificAnimation1 = [
  /* specific animation here */
]

const specificAnimation2 = [
  /* specific animation here */
]

const specificAnimation3 = [
  /* specific animation here */

perjansson

const genericAnimation = [
  /* generic animation here */
]

export const routerTransition = trigger('routerTransition', [
  transition('* => *', genericAnimation)
]);

perjansson

<ul class="grid">
	<li class="high">
		<img src="burger1.jpg">
	</li>
	<li>
		<img src="burger2.jpg">
	</li>
	<li class="wide">
		<img src="burger3.jpg">
	</li>

perjansson

ul {
    list-style: none;
    display: grid;
    grid-gap: 0.4rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 28%;
    grid-auto-flow: dense;
}

.wide {

perjansson

ul {
    list-style: none;
    display: grid;
    grid-gap: 0.4rem;
    grid-template-columns: 33.3% 33.3% auto;
    grid-auto-rows: 40%;
}

perjansson

<ul class="grid">
	<li><img src="burger1.jpg"></li>
	<li><img src="burger2.jpg"></li>
	<li><img src="burger3.jpg"></li>
	<li><img src="burger4.jpg"></li>
	<li><img src="burger5.jpg"></li>
	<li><img src="burger6.jpg"></li>
	<li><img src="burger7.jpg"></li>
	...
</ul>