Open In App

Semantic-UI Grid Negative Margins

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI framework is used to build an excellent user interface. It is an open-source framework that uses CSS and jQuery. This framework allows us to use various styles and properties to make a website more user-friendly.

In this article, we will be seeing the Semantic UI Grid Negative Margins.

Grids employ negative margins to ensure that the first and last columns lie flush with material outside the grid since all grid columns have gutters. Columns in a grid are separated by white space, known as a gutter. No matter how many columns are in a row or how wide the grid is, gutter sizes remain fixed.

 

Semantic-UI Grid Negative Margins Classes:

  • ui top attached button: This class is used to attach with the edge of the grid at the top.
  • ui bottom attached button: This class is used to attach with the edge of the grid at the bottom.

Syntax:

<div class="ui top/bottom attached button">
    ...
</div>

Example 1: To show the Grid Negative Margins using the up top attached button class.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
  
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
  
<body>
    <br/>
    <h1 class="ui header green">
        GeeksforGeeks
    </h1>
      
    <div class="ui top attached button">
        Component before grid
    </div>
    <div class="ui grid">
        <div class="sixteen wide column yellow"></div>
        <div class="four wide column grey"></div>
        <div class="four wide column red"></div>
        <div class="four wide column blue"></div>
    </div>
    <div class="ui grid">
        <div class="sixteen wide column green"></div>
    </div>    
</body>
</html>


Output: We can clearly see that the margin is overlapped with the component.

 

Example 2: To show the Grid Negative Margins using the up bottom attached button class.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
  
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
  
<body>
    <br/>
    <h1 class="ui header green">
        GeeksforGeeks
    </h1>
      
    <div class="ui top attached button">
        Component before grid
    </div>
    <div class="ui grid">
        <div class="sixteen wide column yellow"></div>
        <div class="four wide column grey"></div>
        <div class="four wide column red"></div>
        <div class="four wide column blue"></div>
    </div>
    <div class="ui grid">
        <div class="sixteen wide column green"></div>
    </div>
    <div class="ui bottom attached button">
        Component after grid
    </div>
</body>
</html>


Output:

 

Reference: https://semantic-ui.com/collections/grid.html#negative-margins



Last Updated : 31 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads