[Grid] should have an option to remove padding

[FlorianWendelborn]

trafficstars

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[bot]]

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?

[Lazarencjusz]

+1

[binkley]

Any interest in adding compact to Grid?

[EricVanDerDijs]

This would really make things easier, I do believe that inner content should be responsable for its margins and paddings, after all the grid is just there to manage window space in an easier way.

[petixiuxx]

Any way to make padding = 0 without adjusting the global file ? I'm using react-semantic

[akomm]

@petixiuxx my solution was to simply use grid & flex directly. Most flexible and not that hard. Easy to make component that you need. Not like reinventing the wheel ;)

Better thank hack around the system and/or monkey patch something.

[krishaamer]

+1, also need this for my project!

[GammaGames]

@hammy2899 Do you know if we could get this reopened? It seems like a very nice feature, I was surprised it didn't exist already.

Edit: For the time being, I added the following to my overriding stylesheet:

.ui.compact.grid .row:not(:first-child), .ui.grid .compact.row {
  padding-top: 0;
}
.ui.compact.grid .row:not(:last-child), .ui.grid .compact.row {
  padding-bottom: 0;
}
.ui.compact.grid .column:not(:first-child), .ui.grid .compact.row .column:not(:first-child), .ui.grid .compact.column {
  padding-left: 0;
}
.ui.compact.grid .column:not(:last-child), .ui.grid .compact.row .column:not(:last-child), .ui.grid .compact.column {
  padding-right: 0;
}

It can (and probably should be) modified to be more strict to not affect nested grids, but this works for my purposes.

[y0hami]

@GammaGames I will add it to 2.x milestone, I do have this as a issue for fomantic.

[lubber-de]

Implemented in https://github.com/fomantic/Fomantic-UI 2.5.0

[foysalit]

Is there any update on this? The code @stevenspiel posted works beautifully and can easily be integrated in the source. I'm happy to make it a PR if that helps?

[PawelJ-PL]

+1

[connorpwilliams]

Is there any update on this? The code @stevenspiel posted works beautifully and can easily be integrated in the source. I'm happy to make it a PR if that helps?

Maybe create the PR to prompt action on this and see what happens?

[Klausdk1999]

For anyone reaching this, use this css, with styled-components on Grid.Column. To remove padding from the Grid.Column: &&&& { padding-right: 0px; padding-left: 0px; }

The same idea works on padding top and bottom in the Grid.Row.