[Grid] should have an option to remove padding #2968

FlorianWendelborn · 2015-09-05T15:47:04Z

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.

The text was updated successfully, but these errors were encountered:

denchen · 2016-01-19T02:32:01Z

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 · 2016-07-12T13:57:13Z

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 · 2016-11-28T21:49:46Z

+1 .compact for rows

a column equivalent would be nice, too.

hmaesta · 2016-12-15T22:17:06Z

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 · 2017-05-30T17:52:32Z

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 · 2017-06-01T07:48:09Z

@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 · 2017-06-01T14:45:14Z

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

stevenspiel · 2017-08-09T18:57:15Z

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 · 2018-02-23T08:53:34Z

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 · 2018-04-02T12:39:20Z

Any new way to make padding = 0?

Lazarencjusz · 2018-05-02T21:00:56Z

+1

binkley · 2018-05-06T15:14:29Z

Any interest in adding compact to Grid?

EricVanDerDijs · 2018-05-18T02:22:54Z

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 · 2018-07-21T03:27:55Z

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

akomm · 2018-07-28T18:49:25Z

@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 · 2018-08-07T17:03:10Z

+1, also need this for my project!

GammaGames · 2018-08-21T16:01:05Z

@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 · 2018-08-21T17:07:32Z

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

foysalit · 2019-06-26T17:04:21Z

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 · 2019-08-13T23:07:30Z

+1

connorpwilliams · 2019-08-14T00:13:26Z

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 · 2024-01-17T01:13:48Z

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.

awgv added the Enhancement label Feb 15, 2017

awgv changed the title ~~Feature suggestion: Option to remove padding in grid system.~~ [Grid] should have an option to remove padding Feb 15, 2017

stale bot added the stale label Feb 23, 2018

YamiOdymel mentioned this issue Mar 23, 2018

[Grid] 格線系統要有 Compact 無邊距模式 teacat/tocas#3

Closed

stale bot closed this as completed Mar 25, 2018

y0hami reopened this Aug 21, 2018

y0hami added this to the 2.x Changes milestone Aug 21, 2018

This comment was marked as spam.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Grid] should have an option to remove padding #2968

[Grid] should have an option to remove padding #2968

FlorianWendelborn commented Sep 5, 2015

denchen commented Jan 19, 2016

akomm commented Jul 12, 2016

Ctesias commented Nov 28, 2016

hmaesta commented Dec 15, 2016

markcy commented May 30, 2017 •

edited

Loading

akomm commented Jun 1, 2017 •

edited

Loading

hmaesta commented Jun 1, 2017

stevenspiel commented Aug 9, 2017

stale bot commented Feb 23, 2018

RohovDmytro commented Apr 2, 2018

Lazarencjusz commented May 2, 2018

binkley commented May 6, 2018

EricVanDerDijs commented May 18, 2018

petixiuxx commented Jul 21, 2018

akomm commented Jul 28, 2018 •

edited

Loading

krishaamer commented Aug 7, 2018

GammaGames commented Aug 21, 2018 •

edited

Loading

y0hami commented Aug 21, 2018

This comment was marked as spam.

foysalit commented Jun 26, 2019

PawelJ-PL commented Aug 13, 2019

connorpwilliams commented Aug 14, 2019

Klausdk1999 commented Jan 17, 2024 •

edited

Loading

[Grid] should have an option to remove padding #2968

[Grid] should have an option to remove padding #2968

Comments

FlorianWendelborn commented Sep 5, 2015

denchen commented Jan 19, 2016

akomm commented Jul 12, 2016

Ctesias commented Nov 28, 2016

hmaesta commented Dec 15, 2016

markcy commented May 30, 2017 • edited Loading

akomm commented Jun 1, 2017 • edited Loading

hmaesta commented Jun 1, 2017

stevenspiel commented Aug 9, 2017

stale bot commented Feb 23, 2018

RohovDmytro commented Apr 2, 2018

Lazarencjusz commented May 2, 2018

binkley commented May 6, 2018

EricVanDerDijs commented May 18, 2018

petixiuxx commented Jul 21, 2018

akomm commented Jul 28, 2018 • edited Loading

krishaamer commented Aug 7, 2018

GammaGames commented Aug 21, 2018 • edited Loading

y0hami commented Aug 21, 2018

This comment was marked as spam.

foysalit commented Jun 26, 2019

PawelJ-PL commented Aug 13, 2019

connorpwilliams commented Aug 14, 2019

Klausdk1999 commented Jan 17, 2024 • edited Loading

markcy commented May 30, 2017 •

edited

Loading

akomm commented Jun 1, 2017 •

edited

Loading

akomm commented Jul 28, 2018 •

edited

Loading

GammaGames commented Aug 21, 2018 •

edited

Loading

Klausdk1999 commented Jan 17, 2024 •

edited

Loading