UI Library Starter

# Grid

# Description

A component provides a grids by names.

To transfer content, you can use the main default slot or multiple dynamic.

# Connection

<template>
  <section>
    <!-- Default slot -->  
    <Grid name="rithm-for-two">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </Grid>
  
    <!-- Dinamic slots -->
    <Grid name="rhythm-for-three" :slots="3">
      <template #slot--1>
        1
      </template>
      <template #slot--2>
        2
      </template>
      <template #slot--3>
        3
      </template>
    </Grid>
  </section>
</template>

# Render

rhythm-for-two
1
2
3
4
rhythm-for-three
1
2
3
rhythm-for-four
1
2
3
4
rhythm-for-six
1
2
3
4
5
6
rhythm-for-eight
1
2
3
4
5
6
7
8
rhythm-for-twelve
1
2
3
4
5
6
7
8
9
10
11
12

# Styles

~/src/stylus/utils/_variables.styl

$grids = {
  gutter--desktop: 40px,
  gutter--tablet: 32px,
  gutter--mobile: 24px,
}

# API

# Props

Name Type Description Default
name String Name of grid required
slots [Number, null] Number of dynamic slots null

# Slots

Name Description
default Content
slot--[1..N] Multiple dinamic named slots

# Source code

@/src/components/Grid/Grid.vue

<template>
  <div class="grid" :class="`grid--${name}`">
    <slot />

    <template v-for="(slot, index) in items">
      <div :key="`slot${index}`">
        <slot :name="slot" />
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Grid',

  props: {
    name: {
      type: String,
      required: true,
    },
    slots: {
      type: [Number, null],
      required: false,
      default: null,
    },
  },

  computed: {
    items() {
      if (this.slots) {
        const items = [];
        for (let i = 1; i <= this.slots; i++) {
          items.push(`slot--${i}`);
        }
        return items;
      }
      return null;
    },
  },
};
</script>

<style lang="stylus" scoped>
@import "~/src/stylus/_stylebase.styl";

// Common
$grids-common
  display grid

  +$desktop()
    grid-gap: $grids.gutter--desktop

  +$tablet()
    grid-gap $grids.gutter--tablet

  +$mobile()
    grid-gap $grids.gutter--mobile

.grid
  @extend $grids-common

  &--rhythm-for-two
    grid-template-columns repeat(2, 1fr)

    +$mobile()
      grid-template-columns repeat(1, 1fr)

  &--rhythm-for-three
    grid-template-columns repeat(3, 1fr)

    +$mobile()
      grid-template-columns repeat(1, 1fr)

  &--rhythm-for-four
    grid-template-columns repeat(4, 1fr)

    +$mobile()
      grid-template-columns repeat(1, 1fr)

  &--rhythm-for-six
    grid-template-columns repeat(6, 1fr)

    +$mobile()
      grid-template-columns repeat(1, 1fr)

  &--rhythm-for-eight
    grid-template-columns repeat(8, 1fr)

    +$mobile()
      grid-template-columns repeat(1, 1fr)

  &--rhythm-for-twelve
    grid-template-columns repeat(12, 1fr)

    +$mobile()
      grid-template-columns repeat(1, 1fr)
</style>

← Icon →