Flex grid scaling when centered

mboeni

Hi there

I am tinkering around with the following template:

<template>
  <q-page class="flex items-center justify-center bg-secondary">
  <div class="logoPosition" v-if="this.$q.localStorage.getItem('uiEnableDarkMode')">
      <img alt="NX logo" src="~assets/nexus-logo-neg.png" >
    </div>
    <div class="logoPosition" v-else>
      <img alt="NX logo" src="~assets/nexus-logo-pos.png">
  </div>
    <q-scroll-area
      :thumb-style='thumbStyle'
      :content-style='contentStyle'
      :content-active-style='contentActiveStyle'
      style="width: 100%;"
      class="fill-window">
     <div class="q-pt-sm flex items-center justify-center" :style="{ color: localTextColor1 }">
        <div class="row">
            <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
              NEWS 1
            </div>
            <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
              NEWS 2
            </div>
            <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
              NEWS 3
            </div>
        </div>
        <div class="row">
            <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
              NEWS 4
            </div>
            <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
              NEWS 5
            </div>
            <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
              NEWS 6
            </div>
        </div>
      </div>
    </q-scroll-area>
  </q-page>
</template>

Expected behavior:

When resizing the app, the ‘news’ boxes scale to max-width and back to min-width AND move to stay centered (actually, I have glommed that idea from the Discord App - check out the “Activity” tab and resize the UI to see the effect I want)

Current behavior:

The boxes stay centered but do not scale up to max-width or down min-width. They stay at the default width.

How do I achieve that effect (scaling to max-width / min-width AND staying centered)?

Cheers,
Michael