Tachyons Layout Basic Grid

Last Updated : 03 Jun, 2022

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= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
</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= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
</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>