Semantic-ui: [Grid] Need class to make columns without space between

Created on 10 Aug 2015 · 15Comments · Source: Semantic-Org/Semantic-UI

Hello! Many thx for ur awesome grid system.

To make it even better, please add CSS class for make Semantic UI grid columns without spaces.
What I mean:

<div class="ui two column grid">
    <div class="NOSPACE_CLASS wide column">
        <img>
    </div>
    <div class="NOSPACE_CLASS wide column">
        <img>
    </div>
</div>
<div class="ui two column grid">
    <div class="NOSPACE_CLASS wide column">
        <img>
    </div>
    <div class="NOSPACE_CLASS wide column">
        <img>
    </div>
</div>

And this code result should look like this:
Element 0

AND / OR

<div class="ui NOSPACE_CLASS two column grid">
    <div class="wide column">
        <img>
    </div>
    <div class="wide column">
        <img>
    </div>
</div>
<div class="ui NOSPACE_CLASS two column grid">
    <div class="wide column">
        <img>
    </div>
    <div class="wide column">
        <img>
    </div>
</div>

And this code result should look like this:
Element 1

AND / OR

<div class="ui grid">
    <div class="NOSPACE_CLASS row">
        <div class="wide column">
            <img>
        </div>
        <div class="wide column">
            ...
        </div>      
    </div>      
    <div class="NOSPACE_CLASS row">
        <div class="wide column">
            <img>
        </div>
        <div class="wide column">
            ...
        </div>      
    </div>
</div>

And this code result should look like this:
Element 2

This class really helps us (SUI designers) to create beautiful web pages like this and don't overwrite default classes in semantic.css file:

Element 3

Discussion FiChange Declined Usage Question

Source

koddr

👍3

Most helpful comment

I'd love to see this feature added. I know I've used Bootstrap's gutter options in the past... and not for lining up background images.

ChasonDeshotel on 26 Jul 2017

👍13

All 15 comments

Columns use padding for spacing, which means background is not affected by gutters. Gutters main purpose is to add negative space between columns of text which still needs to be achieved even if the backgrounds match exactly.

In cases like these where you want 100% stretched images use background with cover
http://jsfiddle.net/petwge0o/

jlukic on 10 Aug 2015

Thank you for solution!

But I mean a little bit more.. As example, let's imagine a site with such a design:

semantic-ui-no-space-class-4

Ready layout with content should be similar to:

semantic-ui-no-space-class-5

Code for this like:

<html>
    <head>...</head>
    <body>
        <div class="ui two column grid">            
            <div class="NOSPACE_CLASS four wide column">
                <div class="ui grid">
                    <div class="wide column">
                        <!-- This is sidebar with logo & menu -->
                    </div>
                </div>
            </div>          
            <div class="NOSPACE_CLASS twelve wide column">
                <div>
                    <!--This is slider fullwidth column -->
                </div>
                <div class="ui container">
                    <div class="ui grid">
                        <div class="wide column">
                            <!-- Some text -->
                        </div>
                    </div>      
                </div>
                <div class="ui NOSPACE_CLASS three column grid">
                    <div class="wide column">
                        <img>
                    </div>
                    <div class="wide column">
                        <img>
                    </div>
                    <div class="wide column">
                        <img>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

The <img> cells can not only be a background picture, and text or anything (for example, OS Windows Phone cells).

I understand that such an additional CSS class for such a small chip — it's too difficult, but it is really will facilitate and accelerate development of projects in SUI.. and make CSS code clear.

koddr on 10 Aug 2015

The case for text padding is still the same regardless of layout complexity

simple
http://jsfiddle.net/9e231xm8/

or auto sizing
http://jsfiddle.net/hvz2jzyg/

Any image that's full width should be set as background-image. One of the difficulties with maintaining a library is deciding whether an addition would add complexity or remove it, and unfortunately in this case I think it will add complexity and increase the chance for improper usage (having columns where text between columns run up against each other).

jlukic on 10 Aug 2015

I'm curious why this feature won't be added? While evaluating various front-end frameworks, being able to remove or specify grid gutter size via CSS classes is a feature I would like. Looking at the other major frameworks, Bootstrap, UI-Kit and Foundation this is possible.

https://v4-alpha.getbootstrap.com/layout/grid/#no-gutters
https://getuikit.com/v2/docs/grid.html#grid-gutter
http://foundation.zurb.com/sites/docs/grid.html#gutters

adamdyson on 20 Jul 2017

👍10 🎉1

@jlukic Can this be re-opened and re-considered?

adamdyson on 22 Jul 2017

👍1

I'd love to see this feature added. I know I've used Bootstrap's gutter options in the past... and not for lining up background images.

ChasonDeshotel on 26 Jul 2017

👍13

Am experiencing same issue.

chimsgraphic on 9 Nov 2017

+1.

DaryaTarasowa on 13 Nov 2017

This is obviously a needed feature. Text and/or images are not the only things that go into grids. There are plenty of cases when one needs a grid for aligning elements that regulate their own padding.

zocky on 27 Nov 2017

👍7

@jlukic I would say this feature is required, here is why:

It's obvious that we can't completely separate HTML and CSS from each other. But we can loosely couple them through the class attribute. Using (inline) CSS within the markup (style attributes or tags) on the other hand makes the coupling more tight.

In larger projects you have often different teams for the front and the back. Their one contract is mostly the markup. So the team for the back has only to ensure the HTML fits the specs and the "compiled" resource packages from the front team is also delivered and the job is done.

But what if the back team also have to generate CSS dynamically? The development process become more complicated because of narrowing areas of responsibility of both teams, which will be the case if you have to provide a gutter-less grid for images which are not part of the static resources of the front team but some content which has to be generated dynamically; this whole scenario becomes even more complicated when you have to provide responsive images (srcset). Because the suggested approach is to use background-image (with media queries). Sure it is possible and trivial to implement but from a organizational point of view it's getting more complicated as it has to be. Because you have to start generating CSS dynamically, and thus this stuff is also distributed over several partitions (e.g. some static resources and some code in any CMS of your choice) and each of this partitions is managed by another team.

So the most easiest approach in such scenarios are compact grids to still provide good practice and approved methods regarding separation of concerns in this area.