[Grid] should have an option to remove padding

[FlorianWendelborn]

I had to use a custom CSS grid for the basic task to create this UI because semantic ui assumes that I need padding and margins in the grid. I'm not sure if it's possible, but I think the grid system should either include a nopadding class/option or not assume that it should add padding. If no option to disable this is present I think the padding should be created by containers/segments, but not the grid itself.

TLDR: Grid shouldn't assume padding, but segments and containers should. Otherwise a class would be nice.

[denchen]

I'm running into the same issue. I have a lot of data with a lot of fields that I want to show, so I thought I'd use Semantic's Grid system to nicely lay it out in a 2-3 row, 4-5 column layout per entry, but the inherent padding/gutter sucks up way too much space. Ideally, I want a row right below the previous row, but instead, it's something like 20-30px further down. I've also tried using segments, but the results weren't much better, and I couldn't figure out how to get rid of borders ("basic" seems to only work with a single "segment" and not "segments").

As it is, I've fallen back to using PureCSS's grid system, which doesn't assume padding.

[akomm]

Same issue here. The grid system assumes static & fixed row paddings for example. If you want to use the grid but provide top & bottom paddings by inner-items instead.

Wouldn't it be nice if you could add .compact to .row and so top & bottom paddings are removed?

[Ctesias]

+1 .compact for rows

a column equivalent would be nice, too.

[hmaesta]

For having no margin, you can define @gutterWidth: 0 on collections/grid.variables.

In your case, wouldn't celled grid be the better choice?
With that variation you can define @celledPadding: 0 in the same file.

[markcy]

I needed this as well, and changing a global variable didn't seem like the right solution because I only needed this on certain elements. So, I made a CSS class to do this. Here's the outcome: https://pasteboard.co/cAxQiHn5C.png

The first set of columns is the default Semantic UI grid layout. Below that is my customized row layout. The goal was to collapse the column padding so each column in the row touched each others edges. (no padding left or right).

To do this, a set of columns must be inside a row. I added a class called .collapsed to the row, which removes padding from the columns inside it. Then it adds left/right margin to the row so it sits inline with the rest of the default grid.

Here is my markup:

<div class="ui grid container">
	<div class="stretched collapsed row">
		<div class="four wide column">
			<img src="poster.jpg"/>
		</div>
		<div class="twelve wide column">
			<div class="inner">
				<button class="ui button">Follow</button>
			</div>
		</div>
	</div>
</div>

Here is the custom CSS:

.collapsed.row.stretched { margin: 0 1rem; }
.collapsed.row.stretched .column { padding: 0; }

[akomm]

@hmaesta and what if you use semantic-ui-react and include semantic-ui-css which is precompiled? There is also a separate concern in semantic-ui-css regarding the ability to configure. You need additional scripts or hacking in vendor files to adjust it in your project used as a vendor package. You see how the line is getting stretched further and further, instead of just solve it easy? Plus what @markcy already said.

[hmaesta]

@akomm I agree with you, I had not see from that perspective.

[stevenspiel]

This is what I use:

config/collections/grid.variables:

@compactGutterWidth: 1rem;
@veryCompactGutterWidth: .5rem;
@compactRowSpacing: 1rem;
@veryCompactRowSpacing: .5rem;

config/collections/grid.overrides:

/*----------------------
    Compact Grid
-----------------------*/

.ui.compact.grid  {
  margin-left: -(@compactGutterWidth / 2);
  margin-right: -(@compactGutterWidth / 2);
  margin-top: -(@compactRowSpacing / 2);
  margin-bottom: -(@compactRowSpacing / 2);
}

.ui.compact.grid > .column:not(.row),
.ui.compact.grid > .row > .column,
.ui.grid > .compact.row > .column {
  padding-left: (@compactGutterWidth / 2);
  padding-right: (@compactGutterWidth / 2);
}

.ui.compact.grid .row + .ui.divider,
.ui.grid .compact.row + .ui.divider {
  margin-left: (@compactGutterWidth / 2);
  margin-right: (@compactGutterWidth / 2);
  margin: (@compactRowSpacing / 2) (@gutterWidth / 2);
}

.ui.compact[class*="vertically divided"].grid > .row:before {
  margin-left: (@compactGutterWidth / 2);
  margin-right: (@compactGutterWidth / 2);
  width: ~"calc(100% - "@compactGutterWidth~")";
}

.ui.compact.grid > .row {
  padding-top: (@compactRowSpacing / 2);
  padding-bottom: (@compactRowSpacing / 2);
}

.ui.compact.grid > .column:not(.row) {
  padding-top: (@compactRowSpacing / 2);
  padding-bottom: (@compactRowSpacing / 2);
}

.ui.compact.grid .column + .ui.vertical.divider {
  height: ~"calc(50% - "(@compactRowSpacing/2)~")";
}

.ui[class*="vertically divided"].grid > .column:not(.row),
.ui[class*="vertically divided"].grid > .row > .column {
  margin-top: (@compactRowSpacing / 2);
  margin-bottom: (@compactRowSpacing / 2);
}

.ui.compact.grid > .row > .red.column,
.ui.compact.grid > .row > .orange.column,
.ui.compact.grid > .row > .yellow.column,
.ui.compact.grid > .row > .olive.column,
.ui.compact.grid > .row > .green.column,
.ui.compact.grid > .row > .teal.column,
.ui.compact.grid > .row > .blue.column,
.ui.compact.grid > .row > .violet.column,
.ui.compact.grid > .row > .purple.column,
.ui.compact.grid > .row > .pink.column,
.ui.compact.grid > .row > .brown.column,
.ui.compact.grid > .row > .grey.column,
.ui.compact.grid > .row > .black.column {
  margin-top: -(@compactRowSpacing / 2);
  margin-bottom: -(@compactRowSpacing / 2);
  padding-top: (@compactRowSpacing / 2);
  padding-bottom: (@compactRowSpacing / 2);
}

/* Tablet Only */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
 .ui.compact.grid > .doubling.row > .column,
  .ui.doubling.grid > .row > .column {
    padding-top: (@compactRowSpacing / 2) !important;
    padding-bottom: (@compactRowSpacing / 2) !important;
  }
}

/* Mobile Only */
@media only screen and (max-width: @largestMobileScreen) {
.ui.compact.grid > .doubling.row > .column,
  .ui.doubling.grid > .row > .column {
    padding-top: (@compactRowSpacing / 2) !important;
    padding-bottom: (@compactRowSpacing / 2) !important;
  }
}


/*----------------------
  Very Compact Grid
-----------------------*/

.ui.very.compact.grid  {
  margin-left: -(@veryCompactGutterWidth / 2);
  margin-right: -(@veryCompactGutterWidth / 2);
  margin-top: -(@veryCompactRowSpacing / 2);
  margin-bottom: -(@veryCompactRowSpacing / 2);
}

.ui.very.compact.grid > .column:not(.row),
.ui.very.compact.grid > .row > .column,
.ui.grid > .very.compact.row > .column {
  padding-left: (@veryCompactGutterWidth / 2);
  padding-right: (@veryCompactGutterWidth / 2);
}

.ui.very.compact.grid .row + .ui.divider,
.ui.grid .very.compact.row + .ui.divider {
  margin-left: (@veryCompactGutterWidth / 2);
  margin-right: (@veryCompactGutterWidth / 2);
  margin: (@veryCompactRowSpacing / 2) (@gutterWidth / 2);
}

.ui.very.compact[class*="vertically divided"].grid > .row:before {
  margin-left: (@veryCompactGutterWidth / 2);
  margin-right: (@veryCompactGutterWidth / 2);
  width: ~"calc(100% - "@veryCompactGutterWidth~")";
}

.ui.very.compact.grid > .row {
  padding-top: (@veryCompactRowSpacing / 2);
  padding-bottom: (@veryCompactRowSpacing / 2);
}

.ui.very.compact.grid > .column:not(.row) {
  padding-top: (@veryCompactRowSpacing / 2);
  padding-bottom: (@veryCompactRowSpacing / 2);
}

.ui.very.compact.grid .column + .ui.vertical.divider {
  height: ~"calc(50% - "(@veryCompactRowSpacing/2)~")";
}

.ui[class*="vertically divided"].grid > .column:not(.row),
.ui[class*="vertically divided"].grid > .row > .column {
  margin-top: (@veryCompactRowSpacing / 2);
  margin-bottom: (@veryCompactRowSpacing / 2);
}

.ui.very.compact.grid > .row > .red.column,
.ui.very.compact.grid > .row > .orange.column,
.ui.very.compact.grid > .row > .yellow.column,
.ui.very.compact.grid > .row > .olive.column,
.ui.very.compact.grid > .row > .green.column,
.ui.very.compact.grid > .row > .teal.column,
.ui.very.compact.grid > .row > .blue.column,
.ui.very.compact.grid > .row > .violet.column,
.ui.very.compact.grid > .row > .purple.column,
.ui.very.compact.grid > .row > .pink.column,
.ui.very.compact.grid > .row > .brown.column,
.ui.very.compact.grid > .row > .grey.column,
.ui.very.compact.grid > .row > .black.column {
  margin-top: -(@veryCompactRowSpacing / 2);
  margin-bottom: -(@veryCompactRowSpacing / 2);
  padding-top: (@veryCompactRowSpacing / 2);
  padding-bottom: (@veryCompactRowSpacing / 2);
}

/* Tablet Only */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
 .ui.very.compact.grid > .doubling.row > .column,
  .ui.doubling.grid > .row > .column {
    padding-top: (@veryCompactRowSpacing / 2) !important;
    padding-bottom: (@veryCompactRowSpacing / 2) !important;
  }
}

/* Mobile Only */
@media only screen and (max-width: @largestMobileScreen) {
.ui.very.compact.grid > .doubling.row > .column,
  .ui.doubling.grid > .row > .column {
    padding-top: (@veryCompactRowSpacing / 2) !important;
    padding-bottom: (@veryCompactRowSpacing / 2) !important;
  }
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[RohovDmytro]

Any new way to make padding = 0?