Columns

[marijang]

I have problem with columns and 12 / 14 column spec

Scenario:

First is component HEADING: wrapper offset 1
Second is columns:

1. column (width:4:offset 2)

To get in same position i need to play with column gap....i need to put 50...
Also when i use that scenario then remains only 10 columns which is not divided by three:(

[goranalkovic-infinum]

To preface, you should avoid nesting Columns blocks inside other Columns block, as it adds unnecessary HTML elements.

Regarding the number of columns - in the global manifest you can set the total number of the columns in your project, so 13 might work better for you.

If it's a very specific layout, making a custom block could also be a viable solution.

[marijang]

i m not using nesting columns

[goranalkovic-infinum]

Ah, ok, so it's a heading block, below which is a Columns block?

[marijang]

Yes.

[marijang]

wait i have link, you can see below services... three boxes blue

https://cop.wp.onlyoneif.com/usluge/

[goranalkovic-infinum]

In that case, to ensure perfect alignment, you could place the heading also inside the same Columns block, and have its containing Column span full width.

Then, all the columns you add below will just wrap to the lines below it.

[marijang]

a yea...to much
or just put 12 column mode on columns:D

[marijang]

But you see now example of use.

[goranalkovic-infinum]

Yup, the example is clear now.

With slight modifications within the Columns styles and options you can really easily achieve columns without gutters ("12-column columns") :)

[marijang]

how?

[marijang]

or just enable on columns to have full size and 12 columns....like other wrappers:D

[marijang]

i want to use 14 and 12 columns option. Why to have restriction?
I m not fan of modification your standard components because update.

[marijang]

is it enaught to put on columns

"wrapperUseShowControl": {
"type": "boolean",
"default": true
},

Then i will get 12 columns

[marijang]

and on column i need to put toggle 12 columns vs 14 and also css fix

[goranalkovic-infinum]

No, you need to:

1. remove the columns from the columns-style.scss
2. change the column picker to 12-column mode and disable the gutters in column-options.js

and then if you want to enable the full wrapper on Columns, you can.

[marijang]

yes but i need to pass 12 columns to column block. How to achieve that

[goranalkovic-infinum]

[marijang]

In generateWidthOffsetRangeSliderConfig you don't have includeGutters

[marijang]

also when i put in columns-style.scss
--columns-grid-side-columns: calc(var(--global-grid-side-padding) - calc(var(--columns-column-gap, 0) * var(--base-font-size) * 0.1rem));

then i get nice offset in 14 columns...because now is aligned

[goranalkovic-infinum]

In generateWidthOffsetRangeSliderConfig you don't have includeGutters

Sorry, could you elaborate this a bit more? The config option is definitely there 😄 Perhaps you're looking at Columns instead of Column?

also when i put in columns-style.scss
--columns-grid-side-columns: calc(var(--global-grid-side-padding) - calc(var(--columns-column-gap, 0) * var(--base-font-size) * 0.1rem));

then i get nice offset in 14 columns...because now is aligned

That's one of the solutions for sure, you could also add some inline padding to the Columns block.

[marijang]

look

[marijang]

basicly my problem is not 12 columns... if i want to use offset 2 columns left and right and divide rest of the content in 3 parts i cant do that because i have only 10 columns...10 I can't divide in 3 columns same sizes

[goranalkovic-infinum]

You're not locked into 12 columns, it's always possible to have as many as you want, but in that case if you have 12 columns in the rest of the site, you might not be able to align things well if Columns are 13 columns for example.

[goranalkovic-infinum]

To change the number of columns in the Columns block, simply change the grid-template-columns to have 13 (or any other number) of columns instead of the default var(--global-main-content-width).

After that, you need to change the numOfColumns in the Column block, inside generateWidthOffsetRangeSliderConfig.

[iruzevic]

Thank you, @marijang, for your invaluable input on this ticket. However, as Goran mentioned, this is just a boilerplate. Once you've copied the blocks into your project, you can edit, update, delete, or add anything you'd like. So, there's no need to complicate things any further.

From the conversation, it seems like there are no bugs on this ticket, just suggestions. Goran confirmed that everything is okay with the block, so I will be closing this issue.

Feel free to open a PR or make a fork of this setup and create the boilerplate that suits your needs.