Can I use grid to wrap divs? - ThisIs... Full Site Editing

header

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; }