CODEWITHSUNDEEP
htmlcssgrid-layoutsemantic-ui
Ivan Poliakov
Ivan Poliakov

Reputation: 2475

Why are my columns too wide when using only the grid module from Semantic UI?

I would like to use Semantic UI in my project and I have started with the grid system. At the moment I am only using the pre-built grid module from GitHub.

The following HTML does not work as expected: 

<div class="ui page grid">
  <div class="four wide column red">four</div>
  <div class="four wide column green">four</div>
  <div class="four wide column blue">four</div>
  <div class="four wide column yellow">four</div>
  <div class="sixteen wide column teal">sixteen</div>
</div>

This is the result I am getting:

Columns too wide

The columns are obviously too wide, four "four wide" columns don't fit and the sixteen wide column causes the scroll bar to appear.

It seems that these column divs are supposed to be box-sized which they are not. Their content widths add up exactly to the width of the page, however they also have 1rem padding which I believe is where the extra width comes from.

Is there a common Semantic UI css module that I need to include that adds some basic styles? I am only including grid.css from the above GitHub repository at the moment.

There are no other stylesheets being included and the container HTML page is otherwise blank.

jsfiddle link

Upvotes: 1

Views: 2574

Answers (1)

DrkStrife
DrkStrife

Reputation: 101

Your problem is that you're only including the grid.css stylesheet. You still need the semantic.css stylesheet for the grid to work.

Here is the updated fiddle link, I only added the semantic.min.css resource to it, that fixed the problem.

http://jsfiddle.net/DrkStrife/j8okweLv/1/

EDIT:

Looks like semantic does include everything. I checked the project and they are using a customized reset.css I have updated the fiddle and is still working.

http://jsfiddle.net/DrkStrife/j8okweLv/2/

Upvotes: 2

Related Questions