traxxx/assets/components/networks/networks.vue

<template>
    <div class="networks">
        <Network
            v-for="network in networks"
            :key="`network-${network.id}`"
            :network="network"
        />
    </div>
</template>

<script>
import Network from '../tile/network.vue';

async function mounted() {
    this.networks = await this.$store.dispatch('fetchNetworks');
}

export default {
    components: {
        Network,
    },
    data() {
        return {
            networks: [],
        };
    },
    mounted,
};
</script>

<style lang="scss" scoped>
@import 'theme';

.networks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-gap: 1rem;
    padding: 1rem;
}

@media(max-width: $breakpoint) {
    .networks {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}
</style>