admin管理员组

文章数量:1391925

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?

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>
</div>

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.

本文标签： cssWhat is the cleanest way to shrink Gutenberg Blocks to container width