Semantic-UI Grid Colored

Last Updated : 16 Mar, 2022

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. This framework allows us to use various of its styles and properties to make a website more user-friendly.

A grid is used to harmonize negative space in a layout. In the Semantic UI label, 5 types of Varying Grids are offered. These are Nesting Grids, Colored, Automatic Column Count, Centering Content, and Significant Word Order.

In this article, we will discuss Grid Colored, which is used to fill the colors in the grids. Grids can use named colors variations to add background colors, but only with padded grids that do not include negative margins.

Semantic-UI Grid Colored Classes:

red: This class is used to set the red color to the label.
orange: This class is used to set the orange color to the label.
yellow: This class is used to set the yellow color to the label.
olive: This class is used to set the olive color to the label.
green: This class is used to set the green color to the label.
teal: This class is used to set the teal color to the label.
blue: This class is used to set the blue color to the label.
violet: This class is used to set the violet color to the label.
purple: This class is used to set the purple color to the label.
pink: This class is used to set the pink color to the label.
brown: This class is used to set the brown color to the label.
grey: This class is used to set the grey color to the label.
black: This class is used to set the black color to the label.

Syntax:

<div class="ui grid">
  <div class="row Colored-Class">
    <div class="column Colored-Class">
      ...
    </div>
    <div class="column Colored-Class">
      ...
    </div>
  </div>
</div>

Example 1: The following code demonstrates using grids class with any color.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Label Colored Group</title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
  
    <style> 
        body { 
            margin-left: 10px; 
            margin-right: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <br /> 
    <h1 class="ui header green">GeeksforGeeks</h1> 
    <strong>Semantic UI Grid Colored</strong> 
    <br /><br /> 
    <div class="ui equal width center aligned padded grid"> 
        <div class="row"> 
            <div class="green column"> 
                Green 
            </div> 
            <div class="black column"> 
                Black 
            </div> 
        </div> 
        <div class="row"> 
            <div class="black column"> 
                Black 
            </div> 
            <div class="green column"> 
                Green 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Semantic-UI Grid Colored

Example 2: The following code demonstrates using grids class with a custom color.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Label Colored Group</title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
  
    <style> 
        body { 
            margin-left: 10px; 
            margin-right: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <br /> 
    <h1 class="ui header green">GeeksforGeeks</h1> 
    <strong>Semantic UI Grid Colored</strong> 
    <br /> 
    <br /> 
    <div class="ui equal width center aligned padded grid"> 
        <div class="row blue"> Custom Blue </div> 
        <div class="row green"> Custom Green </div> 
        <div class="row red"> Custom Red </div> 
    </div> 
</body> 
  
</html> 