Tachyons Layout Widths

Tachyons Layout Widths are used to provide width to the element and the width of an element does not include padding, borders, or margins. This width module holds a five-step width scale on powers of two and a percentage series of values. 

Syntax:

<element-tag class= "Width-class">
    ...
</element-tag>

Tachyons Layout Widths Classes: 

• Width Scale:
  • w1: This class is used to set the first step in width scale.
  • w2: This class is used to set the second step in width scale.
  • w3: This class is used to set the third step in the width scale.
  • w4: This class is used to set the fourth step in the width scale.
  • w5: This class is used to set the fifth step in the width scale.
• Width Percentage:
  • w-10: This class is used to provide 10% of the width.
  • w-20: This class is used to provide 20% of the width.
  • w-25: This class is used to provide 25% of the width.
  • w-30: This class is used to provide 30% of the width.
  • w-33: This class is used to provide 33% of the width.
  • w-third: This class is used to provide 100% / 3 of the width. (Not supported in opera mini or IE8)
  • w-34: This class is used to provide 34% of the width.
  • w-40: This class is used to provide 40% of the width.
  • w-50: This class is used to provide 50% of the width.
  • w-60: This class is used to provide 60% of the width.
  • w-two-thirds: This class is used to provide 100% / 1.5 of the width. (Not supported in opera mini or IE8)
  • w-75: This class is used to provide 75% of the width.
  • w-80: This class is used to provide 80% of the width.
  • w-90: This class is used to provide 90% of the width.
  • w-100: This class is used to provide 100% of the width. 

Below examples illustrate the Tachyons Layout Widths:

Example 1: In the below example we will use the width scale classes.

Output:

 

Example 2: In this example we will use the percentage classes.

Output:

 

Reference: https://tachyons.io/docs/layout/widths/