single-post.html

Can I use grid to wrap divs?

Question: Can I use CSS grid to make blocks appear inline?

Answer: You can do it using CSS flex box. So it should be possible using grid as well.

Here we have the block info for two blocks: Post Author and Post Comment Author, displaying the block icon, name, title and description. They are side by side in a columns block. with a light grey background.

core/post-author
Post Author
Add the author of this post.
core/post-comment-author
Post Comment Author
Post comment author.

Styled as a simple grid

Here are the same two block info blocks, this time styled using grid CSS. They’re in a group with Additional CSS class(es) of grid.

core/post-author
Post Author
Add the author of this post.
core/post-comment-author
Post Comment Author
Post comment author.

Grid CSS

This is the CSS used to style each of the sections of the block info blocks horizontally.

.grid div.wp-block-oik-block-blockinfo { display: grid; grid-template-columns: 1fr 2fr 1fr 3fr; }

WordPress version: 5.7.2

Gutenberg version: 10.8.0

© Copyright Herb Miller, Bobbing Wide 2021