Semantic-UI Item Stacking Variation

Last Updated : 20 Feb, 2022

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Item presents a large collection of similar types of data on a website. The Item can contain an image, heading, description, buttons, date, etc. Item is the collection of items in Semantic UI.

Semantic UI Item Stacking Variation can specify how a table of items is stacked. The Stacking variation sets how the items respond to responsiveness.

Semantic UI Item Stacking Variation Classes:

stackable: The items in the table respond to the different screen sizes and changes the layout.
unstackable: The items in the table do not respond to different screen sizes and do not change the layout.

Syntax:

<div class="ui unstackable items">
    ....
</div>

Example: In the following example, we have some items and a button. On clicking the button, the layout changes as stackable or unstackable.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet"
    /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
   </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <style> 
      body { 
        padding: 10px; 
        margin: 10px; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1> GeeksforGeeks </h1> 
        </div> 
        <strong>  Semantic UI Item Stacking Variation </strong> 
      </center> 
    </div> 
    <center> 
      <br /> 
      <div class="ui button" onclick="stackReverse()"> 
        Stackable/Unstackable 
      </div> 
    </center> 
    <div class="ui unstackable items" id="gfgstack"> 
      <div class="item"> 
        <div class="ui small image"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
          /> 
        </div> 
        <div class="middle aligned content"> 
          <div class="header"> 
            Data Structures and Algorithms 
          </div> 
          <div class="meta"> 
            <i class="like icon"></i> 
            <span class="likes"> 
              31 Likes 
            </span> 
          </div> 
        </div> 
      </div> 
      <div class="item"> 
        <div class="ui small image"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
          /> 
        </div> 
        <div class="middle aligned content"> 
          <div class="header"> 
            Machine Learning 
          </div> 
          <div class="meta"> 
            <i class="favorite icon"></i> 
            <span class="likes"> 
              123 Favourites 
            </span> 
          </div> 
        </div> 
      </div> 
    </div> 
    <script> 
      function stackReverse() { 
        $('#gfgstack').toggleClass('unstackable').toggleClass('stackable') 
      } 
    </script> 
  </body> 
</html> 