Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Grid Negative Margins

Improve Article
Save Article
  • Last Updated : 31 Oct, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!