Grid: How to center multiple columns

[Lithimlin]

Setup

• Browsers and versions: Chrome Version 65.0.3325.181(64 Bit)
• MediaWiki version:
• Database version:
• PHP version:
• Pivot version:
• Extension version (if connected to the issue): all currently unkown, but should all be fairly new. This is more of a question than an issue.

Issue

I am trying to use the Grid, but I need 13 columns. Thus I created 3 collumns and within the middle one 11 more which I was trying to center. But if I put <div class="small-1 small-centered columns nopad">1</div>, it results in "1" being alone in the middle and everything else being in the next row.

<div class="small-1 columns nopad"> Sandbox </div>
<div class="small-10 columns nopad">
                <div class="small-1 small-centered columns nopad">0</div>
                <div class="small-1 small-centered columns nopad">1</div>
                <div class="small-1 small-centered columns nopad">2</div>
                <div class="small-1 small-centered columns nopad">3</div>
                <div class="small-1 small-centered columns nopad">4</div>
                <div class="small-1 small-centered columns nopad">5</div>
                <div class="small-1 small-centered columns nopad">6</div>
                <div class="small-1 small-centered columns nopad">7</div>
                <div class="small-1 small-centered columns nopad">8</div>
                <div class="small-1 small-centered columns nopad">9</div>
                <div class="small-1 small-centered columns nopad">10</div>
</div>
<div class="small-1 columns nopad">Linear</div>

This results in "Sanbox" being linear, then 0-10 underneath each other, centered, and "Linear" on the right.

[Hutchy68]

But your "column 2" only has 11 columns. Everything needs to total 12, even sub divs. So what you should do is 1 & 11 and the 11 column width should sub 12 for a total of 13 columns.

Here is how to do 13 columns and center them. I think you want to text-align content to the center. Not center the column itself. Anyway, see https://pivot.wikiproject.net/wiki/User:Hutchy68/13_Columns for the demo and explanation on how.

[Lithimlin]

Thanks a lot!

[kghbln]

Here is how to do 13 columns and center them. I think you want to text-align content to the center. Not center the column itself. Anyway, see https://pivot.wikiproject.net/wiki/User:Hutchy68/13_Columns for the demo and explanation on how.

To me this demo looks like it could be added to an "official" wiki page rather than to a "private" subpage.