CODEWITHSUNDEEP
csssemantic-ui
David H
David H

Reputation: 1605

Semantic-UI grid: Spanning columns in a grid with different counts per row

I have a Semantic UI grid with an "odd" number of columns per row:

<div class="ui grid">
   <div class="seven column row">
       <div class="column">ABC</div>
       <div class="column">DEF</div>
       <div class="column">GHI</div>
       <div class="column">JKL</div>
       <div class="column">MNO</div>
       <div class="column">PQR</div>
   </div>

I would like the "PQR" cell to span two non-standard-sized columns (the last two).

Using "column two wide" does not work.

Can anyone tell me how to do this?

Upvotes: 0

Views: 1930

Answers (1)

Sarthak
Sarthak

Reputation: 1052

Semantic-UI uses a 16 column grid by default. You can change this for the purpose of your web app by adjusting the theming variables.

If you would not like to play around with that, you can use only 14 of the 16 columns and center align the grid to have equal space on both left and right side.

Example: https://jsfiddle.net/batrasoe/nnpxgmaq/

<div class="ui center aligned grid">
   <div class="row">
       <div class="two wide column">ABC</div>
       <div class="two wide column">DEF</div>
       <div class="two wide column">GHI</div>
       <div class="two wide column">JKL</div>
       <div class="two wide column">MNO</div>
       <div class="four wide column">PQR</div>
       </div>
   </div>

This uses 2+2+2+2+2+4 = 14 columns

Using something like <div class="seven column row"> gives the columns equal width. This is why your two wide column wouldn't work - as it conflicts the equal width property by saying make the column 2/16 of the width of grid.

Upvotes: 2

Related Questions