Semantic-UI: Unable to get 3 equal-width columns in a .ui.page.grid

Hey guys,

I am really struggling with getting 3 columns inside a page layout.

I am only using the semantic CSS, no CSS of my own for now. I am just trying to wrap my head around the grid stuff.

This is my complete body content:

    <div class="ui page grid">
      <header class="sixteen wide column">
        <div class="ui segment">Header text.</div>
      </header>
      <div class="ui divided grid">
        <div class="eight wide column">
          <div class="ui segment">Left text</div>
        </div>
        <div class="eight wide column">
          <div class="ui segment">Right text</div>
        </div>
      </div>
      <div class="ui three column grid">
        <div class="column">
          <div class="ui segment">1</div>
        </div>
        <div class="column">
          <div class="ui segment">2</div>
        </div>
        <div class="column">
          <div class="ui segment">3</div>
        </div>
      </div>
      <footer class="sixteen wide column">
        <div class="ui segment">Footer text.</div>
      </footer>
    </div>

I understand how to get a full width column — that’s verbose but it works.

I also am able to get 2 half-width columns using .sixteen.wide.column elements.

But since 16 is not dividable by 3, I am trying to use this to obtain 3 columns:

      <div class="ui three column grid">
        <div class="column">
          <div class="ui segment">1</div>
        </div>
        <div class="column">
          <div class="ui segment">2</div>
        </div>
        <div class="column">
          <div class="ui segment">3</div>
        </div>
      </div>

That code above is lifted from this documentation page: http://semantic-ui.com/collections/grid.html

I get this, alas:

welcome shopify ui elements generator 2014-03-16 15-08-56 2014-03-16 15-09-05

It seems that the width issue comes from this CSS:

 .ui.grid > .column, .ui.grid > .row > .column {
   width: 6.25%;
 }

No I need an additional class anywhere, or some additional markup?

Thank you so much!

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 20 (1 by maintainers)

Most upvoted comments

No, sorry, just checking the docs and messing with it. I was fixing your code, but actually jsfiddle.net crashed (at least for me).

The easiest fix would be just to add more CSS to remove the extra margin. I was sure there is a class in Semantic to do exactly that, too bad I forgot which one it was…

Edit: Well, this is the closest that I can do: http://jsfiddle.net/2ECnP/1/

I guess there is some stuff that just can’t be predicted when you make a CSS-library 👍

Edit2: @jlukic feature idea: When being inside a ui.grid already, if you open another grid, the first columns within will have zero margin on top and bottom.

Edit3: @carolineschnapp actually, if you need a 3 and a 2 column grid thing on your website, why don’t you use a .twelve.column.grid? (Or a .six.column.grid)

Anachron on Mar 16, 2014