Basic Grid

You can combine display, float, padding, and widths to construct a wide variety of grids. Here is a basic example of some options for constructing a simple grid.

Directive

Use v-fl directive to float element to the left and add v-w directive to set the width value.

<template>
  <div>
    <div v-fl v-w.90></div>
    <div v-fl v-w.10></div>
  </div>
</template>

Examples

v-fl v-w.100

v-fl v-w.75

v-fl v-w.25

v-fl v-w.70

v-fl v-w.30

v-fl v-w.60

v-fl v-w.40

v-fl v-w.50

v-fl v-w.50

v-fl v-w.third

v-fl v-w.third

v-fl v-w.third

v-fl v-w.third

v-fl v-w.two-thirds

v-fl v-w.25

v-fl v-w.25

v-fl v-w.25

v-fl v-w.25

Reference

• Grids Source Docs | Tachyons
• width | MDN