Semantic-UI Grid Negative Margins

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.

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

👁 Image

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

Output:

👁 Image

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