Skip to content

Instantly share code, notes, and snippets.

@PawkaHub
Last active August 14, 2018 17:22
Show Gist options
  • Save PawkaHub/813cdfaa2a71a0b3582d90c7f2d54be9 to your computer and use it in GitHub Desktop.
Save PawkaHub/813cdfaa2a71a0b3582d90c7f2d54be9 to your computer and use it in GitHub Desktop.
Vue Grid Example
<template>
<div class="cell">
<slot></slot>
</div>
</template>
<style lang="scss">
@import "~assets/mixins.scss"
.cell {
align-self: stretch;
justify-self: stretch;
flex: 1;
@media (max-width: $mobile-breakpoint-small) {
flex: 1 0 100%;
max-width 100%;
}
}
</style>
<template>
<div class="grid">
<slot></slot>
</div>
</template>
<style lang="scss">
@import "~assets/mixins.scss";
.grid {
position: relative;
display: flex;
flex-wrap: wrap;
justify-self: stretch;
width: 100%;
height: 100%;
}
</style>
<template>
<div class="row">
<slot></slot>
</div>
</template>
<style lang="scss">
@import "~assets/mixins.scss";
.row {
display: flex;
flex-wrap: wrap;
flex: 1 0 100%;
position: relative;
}
</style>
<template>
<!-- Grids can be nested, rows are used as breakpoints for cells, and cells automatically wrap based on the media query specified in cell.vue (an opinionated implementation that you may not need depending on your use case). You can also add custom classes to any grid / row / cell component to override the styles based on your specific implementation use case -->
<grid>
<!-- Only has three cells, wraps based on media query in cell.vue -->
<row>
<cell>Row One Cell One</cell>
<cell>Row One Cell Two</cell>
<cell>Row One Cell Three</cell>
</row>
<!-- Only has two cells, wraps based on media query in cell.vue -->
<row>
<cell>Row Two Cell One</cell>
<cell>Row Two Cell Two</cell>
<cell>
<grid>
<row>
<cell>Row Two Nested Row One Cell One</cell>
<cell>Row Two Nested Row One Cell Two</cell>
</row>
<row>
<cell>Row Two Nested Row Two Cell One</cell>
<cell>Row Two Nested Row Two Cell Two</cell>
<cell>Row Two Nested Row Two Cell Three</cell>
</row>
</grid>
</cell>
</row>
<!-- Only has one cell, wraps based on media query in cell.vue -->
<row>
<cell>Row Three Cell One</cell>
</row>
</grid>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment