What is the cleanest way to shrink Gutenberg Blocks to container width?


Gutenberg allows adjusting blocks to different widths. For example an image can fill the standard grid container of about 1200px or use full window width. I tested the the following four CSS methods and had issues with every single approach. Which method works in real world pages?

Gutenberg Width Selector

Twentytwenty Theme

The well known standard theme has a full width content area and sets all blocks to container width when no special width adjustment is given.

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
  max-width: 58rem;
  width: calc(100% - 4rem);

Pro: Works with all blocks.

Con: Very hacky CSS selector.

Wrapper blocks

The content area is full width and all blocks will fill it. There is a special group block that shrinks the containing blocks to container width. This is the approach of Elementor’s Section block.

Pro: Works with all blocks, simple CSS

Con: Nearly everything has to be wrapped in that section block

Class content-container

The content area is full width. The Gutenberg blocks contain an element shrinking themselves to grid size.

<div class="grid-container">
  <p>lorem ipsum</p>

Pro: Very simple CSS with explicit selectors

Con: Every single Gutenberg block has to be rewritten as they usually don’t have that element.

content = container width

This is the approach of most themes. The content element has the with of about 1200px. Every block wider than that gets a special CSS growing over the parent.

.entry-content .alignfull {
  margin-left: calc(-100vw/2 + 100%/2);
  margin-right: calc(-100vw/2 + 100%/2);
  max-width: 100vw;
  width: auto;

Con: Wrong width as 100vw includes the scrollbar, hacky CSS

Pro: None. It does not even work.

, netAction 4 years 2020-02-20T08:41:47-05:00 0 Answers 48 views 0

Leave an answer