Tachyons Layout Display

Last Updated : 05 Jul, 2022

Tachyons is a free and open-sourceCSS toolkit that is used to create a responsive website very easily.

Tachyons Layout is used to define those sub-parts of a website. The Tachyons Layout Display is a display that is used to define the display of an element at any breakpoint.

Tachyons Layout Display Classes:

.db: This class is used to create the element in the block, by declaring the display: block;, which inherently set width to 100% of its base element.
.dib: This class is used to create the element in inline-block, by declaring display: inline-block;, that wrap around content inline.
.di: This class is used to create the element in the inline, by declaring display: inline;, i.e. it helps to set content inline.
.dt: This class is used to create a table with different sized cells, by declaring display: table;. It can be combined with display table-cell to render a table without table markup.
.dtc: This class is used to display the table-cell without any table markup.
.dt–fixed: This class is used to create the table with the same sized cells, i.e. it is used to set the table layout as fixed.
.dn: This class is used to create the element with no property, by declaring display: none;.

Syntax:

<element-name class="display-class">...</element-name>

Example1: In the below example, we will make use of the display classes to demonstrate layout display.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
    <style> 
        div { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green; 
               text-align:center;"> 
        GeeksforGeeks 
    </h2> 
    <h3 style="text-align:center;"> 
        Tachyons Layout Display 
    </h3>  
    <span class="db"
          style="background-color:lightgreen; 
                 text-align:center;">GFG 
    </span> 
</body> 
</html>

Output:

Example 2: In the below example, we will make use of the display classes to demonstrate layout display.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
    <style> 
        div { 
            text-align: center; 
        } 
          
        .dn { 
            display: none; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green; 
               text-align:center;"> 
        GeeksforGeeks 
    </h2> 
    <h3 style="text-align:center;"> 
        Tachyons Layout Display 
    </h3>  
    <span class="di"
          style="background-color:lightgreen; 
                 text-align:center;">GFG 
    </span> 
    <br> 
    <p class="dn">GeeksforGeeks</p> 
  
</body> 
</html>