Page Layout based on Semantic-UI Grid: cannot remove the gutters

Question

I am creating a web application using semantic-ui. I am trying to create a layout which has a sidebar and main content area. At first, I thought using grid would be the way to go, except that they cause a few problems:

1. The columns and rows will have extra spacing/gutters between them
2. The only way to "remove" the gutters is to set a column color with something like <div class="four wide black column">, but this causes the columns to overlap with other content

So it seems that grid are not the best tool for creating page layouts, although they do provide functionality which makes them useful for page layouts (like defining section sizes; four wide column, ten wide column, etc)

What is the recommended way to layout web applications using Semantic-UI, such as a simple sidebar and main content columns?

Answer 1

Why don't you override the default margin and padding applied for "grid" and "column" like this,

.your-custom-class.grid {
    margin: 0;
}
.your-custom-class.grid .column {
    padding: 0;
}

Thus you'll get a grid with no space in between the columns.