product_list_grid_switching.amp.html

<!--
  Switch client-side view from 3 to 4 column grid
-->

<!-- Start Grid Size -->
<amp-bind-macro
  id="activeButtonStyle"
  arguments="attr, val"
  expression="filtering[attr] == val ? 'p-1 border bg-black text-white cursor-pointer' : 'p-1 border cursor-pointer'"></amp-bind-macro>

Per Row
<button type="button"
  class="p-1 border bg-black text-white"
  [class]="activeButtonStyle('grid', 'w-1/3')"
  on="tap:AMP.setState({ filtering: { grid: 'w-1/3' } })">
  G3</button>

<button type="button"
  class="p-1 border cursor-pointer"
  [class]="activeButtonStyle('grid', 'w-1/4')"
  on="tap:AMP.setState({ filtering: { grid: 'w-1/4' } })">
  G4</button>

<amp-list
  layout="fixed-height"
  height="1000"
  src="/filters.json.php"
  [src]="'/filters.json.php?<?=$initial?>">
  <template type="amp-mustache" id="product-list">
    <div class="flex flex-wrap">
      {{#results}}
      <div class="w-1/3" [class]="filtering.grid">
        <!-- product template here -->
      </div>
      {{/results}}
    </div>
  </template>
</amp-list>