Radunia components

QGrid components

Each container can have one or several sub items. Usage of columns is encouraged as they provide some standard paddings. They're not mandatory though.

Requirements

TypePath / VersionPurposeOptional
Styles../../assets/main.cssCSS VariablesNo

Usage

Import the following component/s:

import QGridContainer from '../../components/Layout/Grid/QGridContainer.vue'
import QGridColumn from '../../components/Layout/Grid/QGridColumn.vue'

One column layout

Containers are responsive. Their width is relative to their respective parent element.

Column 1
Column 2
Column 3
<q-grid-container format="1">
  <q-grid-column >Column 1</q-grid-column>
  <q-grid-column >Column 2</q-grid-column>
  <q-grid-column >Column 3</q-grid-column>
</q-grid-container>

Three even columns - format

Three columns that scale down at less than 992px. Use whenever you need a bit of space around your content

Column 1
Column 2
Column 3

Example

<q-grid-container format="1/1/1">
  <q-grid-column>Column 1</q-grid-column>
  <q-grid-column>Column 2</q-grid-column>
  <q-grid-column>Column 3</q-grid-column>
</q-grid-container>

Three even columns - cols

Another way to achieve the above is to specify cols instead of format. Cols can be any numeric value, but should not be extended beyond 12

Column 1
Column 2
Column 3

Example

<q-grid-container :cols="3">
  <q-grid-column>Column 1</q-grid-column>
  <q-grid-column>Column 2</q-grid-column>
  <q-grid-column>Column 3</q-grid-column>
</q-grid-container>

1/2/1 format

A big column surrounded by two smaller ones. Useful to make content stand out or reduce the size of the normal container.

Column 1
Column 2
Column 3

Example

<q-grid-container format="1/2/1">
  <q-grid-column>Column 1</q-grid-column>
  <q-grid-column>Column 2</q-grid-column>
  <q-grid-column>Column 3</q-grid-column>
</q-grid-container>

2/1/2 format

A small column surrounded by two bigger ones. Useful in case you'd like to make two separate columns stand out

Column 1
Column 2
Column 3

Example

<q-grid-container format="2/1/2">
  <q-grid-column>Column 1</q-grid-column>
  <q-grid-column>Column 2</q-grid-column>
  <q-grid-column>Column 3</q-grid-column>
</q-grid-container>

Fluid container

In order to scale a container to its full size, just add :fluid="true" to the grid container element

Column 1
Column 2
Column 3
<q-grid-container :fluid="true" format="1/1/1">
  <q-grid-column>Column 1</q-grid-column>
  <q-grid-column>Column 2</q-grid-column>
  <q-grid-column>Column 3</q-grid-column>
</q-grid-container>

Full component's code

QGridContainer

<template>
  <div
    v-if="cols"
    class="q-grid"
    :class="{
      'q-grid-fluid': fluid === true,
    }"
    :style="{ 'grid-template-columns': `repeat(${cols}, 1fr)` }"
  >
    <slot />
  </div>
  <div
    v-if="format"
    class="q-grid"
    :class="{
      'q-grid-fluid': fluid === true,
      'q-grid-1': format === '1',
      'q-grid-1-1': format === '1/1',
      'q-grid-1-2': format === '1/2',
      'q-grid-1-3': format === '1/3',
      'q-grid-1-1-1': format === '1/1/1',
      'q-grid-1-2-1': format === '1/2/1',
      'q-grid-2-1-2': format === '2/1/2',
      'q-grid-dynamic': format === 'dynamic',
    }"
  >
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    fluid: {
      type: Boolean,
      required: false,
      default: false,
    },
    cols: {
      type: Number,
      required: false,
    },
    format: {
      type: String,
      required: false,
    },
  },
};
</script>

<style scoped>
.q-grid {
  width: 95%;
  display: grid;
  margin: auto;
  grid-column: auto;
}

.q-grid-fluid {
  width: 100% !important;
}

.q-grid-1,
.q-grid-1-1,
.q-grid-1-2,
.q-grid-1-3,
.q-grid-1-1-1,
.q-grid-1-2-1,
.q-grid-2-1-2 {
  grid-template-columns: 100%;
}

@media (min-width: 768px) {
  .q-grid {
    width: 80%;
  }
  .q-grid-1-1,
  .q-grid-1-3 {
    grid-template-columns: 50% 50%;
  }

  .q-grid-2-1-2 {
    grid-template-columns: 35% 30% 35%;
  }
}

@media (min-width: 992px) {
  .q-grid {
    width: 70%;
  }
  .q-grid-1-2 {
    grid-template-columns: 33.33% 66.67%;
  }
  .q-grid-1-3 {
    grid-template-columns: 25% 75%;
  }
  .q-grid-1-1-1 {
    grid-template-columns: 33.33% 33.34% 33.33%;
  }

  .q-grid-1-2-1 {
    grid-template-columns: 25% 50% 25%;
  }

  .q-grid-2-1-2 {
    grid-template-columns: 40% 20% 40%;
  }
}

@media (min-width: 1200px) {
  .q-grid {
    width: 60%;
  }
}

@media (min-width: 1400px) {
  .q-grid {
    width: 50%;
  }
}
</style>

QGridColumn

<template>
  <div class="q-grid-col">
    <slot />
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.q-grid-col {
  padding-left: var(--gap-xl);
  padding-right: var(--gap-xl);
}
</style>