Semantic-UI Grid Column Content

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing and responsive.

The semantic UI Grid element is used to display the content into rows and columns to make it easier to design the web pages. The Semantic-UI Grid Column Content is used to add the content for the column and add padding to the column element. The styling to the column content should not be applied directly to columns but to elements inside of columns.

Semantic-UI Grid Column Content Used Class:

• column: This class is used to add the content area column for the element.

Syntax:

<div class="ui number* column grid">
      <div class="column">
        <div class="ui segment">
              ...
        </div>
    </div>
    ...
</div>

Note: The number* can be replaceable with the alphabetic spell of any number

Example 1: In this example, we will describe the use of Semantic-UI Grid Column Content.

Output:

Semantic-UI Grid Column Content

Example 2: In this example, we will describe the use of Semantic-UI Grid Column Content.

Output:

Semantic-UI Grid Column Content

Reference: https://semantic-ui.com/collections/grid.html#column-content