Full and wide alignment in Gutenberg

The new WordPress block editor includes two new alignment options.

To take advantage of the new alignment options, your theme must first support them. Include add_theme_support( 'align-wide' ) in your functions.php file.

Full Alignment

The .alignfull option should span the full width of the screen. I typically do this using the following CSS:

.alignfull {
	margin: 32px calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

The margin property can accept up to 4 values. In this case I provided 2 properties so the first ( 32px) is applied to the top and bottom, and the second (calc( 50% - 50vw)) is applied to the left and right.

This tells the browser to calculate 50% of the its container’s width (ex: 900px) and subtract from it 50% of the viewport width (ex: 1600px). This results in a negative margin that pulls the element to the edges of the screen.

Make sure you have width: 100%; overflow: hidden; on your site container. In some browsers, the 100vw doesn’t consider the vertical scrollbar so it will make your page a bit too wide, adding a horizontal scrollbar. One thing that has worked for me is adding overflow: hidden; width: 100%; to some full-width div that wrap the entire site. In my themes, that is .site-container.

Wide Alignment

You have more flexibility with the .alignwide option. It should be wider than the main content area, but not as wide as the full alignment. There are two approaches I usually take:

Percentage Width

This is my default styling option built into my base themes. It copies the full alignment in approach, but instead of stretching the full gap between the browser edge and the content, it only does half.

.alignwide {
	margin: 32px calc(25% - 25vw);
	max-width: 100vw;
	width: 100vw;
}

Max width

I set a maximum width if there are certain design constraints (like the Recommended Reading floating to the right) or you only want the image to reach a certain size.

I’ll make .alignwide and .alignfull use the same CSS at first, but at a certain break point I’ll change .alignwide to a fixed max width and margins.

For the negative left/right margin, I subtract the full page width from the content width and divide by two. Ex: ( 768px – 920px ) / 2

.alignwide,
.alignfull {
	margin: 32px calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

@media (max-width: 920px) {
	.alignwide {
		margin: 32px -76px;
		max-width: 920px;
		width: 920px;
	}
}

You can also put the math directly in the CSS using calc()

.alignwide,
.alignfull {
	margin: 32px calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

@media (max-width: 920px) {
	.alignwide {
		margin: 32px calc( ( 767px - 920px ) / 2 );
		max-width: 920px;
		width: 920px;
	}
}

https://www.billerickson.net/full-and-wide-alignment-in-gutenberg/