CODEWITHSUNDEEP
csssemantic-ui
Caroline Schnapp
Caroline Schnapp

Reputation: 808

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

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!

Upvotes: 0

Views: 1761

Answers (2)

Wei
Wei

Reputation: 21

Here you go:

<div class="ui three column grid">
  <div class="column">
    Content
  </div>
  <div class="column">
    Content
  </div>
  <div class="column">
    Content
  </div>
</div>

Upvotes: 2

Will San
Will San

Reputation: 1

I had a similar problem!

Its done this way:

    <div class="ui divided grid stackable">

        <div class="three column row">

         <div class="column wide"> 
          <p> Your stuff here </p>
         </div>

         <div class="column wide">
         <p> Your stuff here </p>
         </div>

         <div class="column wide">
          <p> Your stuff here </p>
         </div>

        </div>

   </div>

Upvotes: 0

Related Questions