> For the complete documentation index, see [llms.txt](https://docs.gutenbricks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gutenbricks.com/features/advanced/block-wrapper-dynamic-class.md).

# Block Wrapper Dynamic Class

The HTML structure inside the Block Editor may differ slightly from the one rendered on the frontend. Most notably, an extra wrapper \<div> around the actual block content.

<figure><img src="/files/f8RiOk1QwvWQCNrPSPq3" alt=""><figcaption><p>Inside Gutenberg editor, the &#x3C;div> in the red box is a wrapper wrapping &#x3C;section> which is the actual content. Of course the &#x3C;div> wrapper is only for Gutenberg Editor to keep tracking and managing the blocks and not rendered in the frontend.</p></figcaption></figure>

In this case, some CSS applied to the outermost element might not work. For eg, `grid-column` that requires the immediate parent to be a grid.&#x20;

To solve this issue, users can add dynamic classes to outermost block wrapper using Block Wrapper Dynamic Class (under template settings -> Gutenbricks:Block.)

<figure><img src="/files/LXfKD0o8dQVlynZZYwLx" alt=""><figcaption></figcaption></figure>

For example, you can declare something like `cold-span-{dynamic_variable}`  and the dynamic class will be applied to the block wrapper like this:&#x20;

<figure><img src="/files/dSu1qJfdgGZ7810eGLI5" alt=""><figcaption><p>col-span-5 has been applied to the block wrapper where "5" is from dynamic_variable.</p></figcaption></figure>

Now you can see `column-span` working because the block wrapper which is the grid's immediate child has `col-span-5` class.

<figure><img src="/files/stG76W3663GHmU4V0R1j" alt=""><figcaption></figcaption></figure>