Tachyons Layout Basic Grid
Tachyons Layout Basic Grid is a layout with rows and columns, making it easier to design web pages without having to use floats and positioning. We can create a variety of grids by combining widths, float, and padding.
Syntax:
<element-name class="class-name"></element-name>
Tachyons Layout Basic Grid Classes: There is no class for Grids but as we mentioned that we can create a grid by using padding, float, and widths.
- fl w-100 pa2: This class is used to provide 100% of the width.
- fl w-90 pa2: This class is used to provide 90% of the width.
- fl w-80 pa2: This class is used to provide 80% of the width.
- fl w-70 pa2: This class is used to provide 70% of the width.
- fl w-60 pa2: This class is used to provide 60% of the width.
- fl w-50 pa2: This class is used to provide 50% of the width.
- fl w-40 pa2: This class is used to provide 40% of the width.
- fl w-30 pa2: This class is used to provide 30% of the width.
- fl w-20 pa2: This class is used to provide 20% of the width.
- fl w-10 pa2: This class is used to provide 10% of the width.
Example 1: In the below example we have to make use of the above class to demonstrate the Basic Grid:
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href=</head> <body> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <h3> Tachyons Layout Basic Grid </h3> <div class="mw8 center ph3-ns"> <div class="fl w-100 pa2"> <div class="outline bg-white pv4"> fl w-100 pa2 </div> </div> </div> </center></body></html> |
Output:
Tachyons Layout Basic Grid
Example 2: In the below example we have to make use of the above class to demonstrate the Multiple Grid:
HTML
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href=</head><body> <center> <h2 style="color:green;"> GeeksforGeeks</h2> <h3> Tachyons Layout Basic Grid </h3> <div class="mw9 center ph3-ns"> <div class="cf ph2-ns"> <div class="fl w-100 w-25-ns pa2"> <div class="outline bg-white tc pv4"> fl w-100 w-25-ns pa2 </div> </div> <div class="fl w-third w-25-ns pa2"> <div class="outline bg-white tc pv4"> fl w-third w-25-ns pa2 </div> </div> <div class="fl w-third w-25-ns pa2"> <div class="outline bg-white tc pv4"> fl w-third w-25-ns pa2 </div> </div> <div class="fl w-third w-25-ns pa2"> <div class="outline bg-white tc pv4"> fl w-third w-25-ns pa2 </div> </div> </div> </div> </center></body></html> |
Output:
Tachyons Layout Basic Grid
Reference: https://tachyons.io/docs/layout/grid/
Please Login to comment...