Title: How do I add spacing to a grid using the block editor?
Last modified: March 3, 2025

---

# How do I add spacing to a grid using the block editor?

 *  [senseivita](https://wordpress.org/support/users/senseivita/)
 * (@senseivita)
 * [1 year, 3 months ago](https://wordpress.org/support/topic/a-hrefhttps/)
 * I’m trying to find the right combination of group blocks to create a layout where
   I have a central column divided in three sub-columns for object (text, image,
   etc) placement, plus another two columns on each side that are part of the central
   3, so objects can be placed on the side orbiting something in the main columns
   so they go up and down with it. I knew I wouldn’t know how to explain, ✓ (check,)
   so I made a quick rough sketch of it. It’s linked below.
 * I managed to get it using `Columns` but it wasn’t pretty, much less efficient
   since whenever I’d need a “satellite” I would need a new `Columns` block—which
   of course I cheated by simply duplicating it and deleting the `Paragraph` blocks
   or whatever it had in it.
 *     ```wp-block-code
       ▽ Columns    ▽ Column          Paragraph          Paragraph    ▽ Column          Image
       ```
   
 * _This ended off-center, thought I could disguise it with the images I’m creating
   as I go— It’s a lot of custom work that would make no sense the moment I change
   themes, color scheme or something (I’m using Twenty Twenty-Five, BTW. No plugins.)_
 * Then, I tried the `Grid` block, and I’m okay making adjustments to each contained
   block to set the its column/row span within the grid, but, since I want two side
   columns to flank the main three, they would be empty for the most part and the
   grid automatically tries to fill them. They need some empty calories. I tried
   filling the leftmost column with a spacer block set to span _enough_, and it 
   worked, except when an object filling all 5 columns (edge-to-edge) interrupted
   it. I couldn’t make it, or rather another continue down. The rightmost side is
   even more confusing, both sides because grid spaces fill voids so it gets even
   more complicated in mobile.
 * If two or more multi-column blocks don’t fit perfectly in the gird, blanks are
   indeed left in it, I don’t know if `Spacer` blocks spanning >10 rows would be
   inserted in there since column-wise they fit. Specially after a five-column break.
 * It occurred to me making the central column using a given type of containers 
   blocks, wrapped into another type of container blocks, with yet another type 
   of container blocks on each side, that’s more or less:
 *     ```wp-block-code
       ▽ Container    ▽ Container (left padding, sat space)      ▽ Container (horizontal distribution)          Media asset    ▽ Container (central)      ▽ Container (possibly columns parent)        ▽ Container (then each column…)          Paragraph column 1 of 2        ▽ Container          Paragraph column 2 of 2                  ▽ Container           Media asset    ▽ Container (right padding, sat space)      ▽ Container (horizontal distribution)          Media asset
       ```
   
 * But then I realized they would be disconnected from the center, how would they
   track the content to move up and down with it?
 * A little help, please?? See the picture, it will make more sense than I do.
 * Thanks!
 * > [View post on imgur.com](https://imgur.com/mKMW3g5)
    -  This topic was modified 1 year, 3 months ago by [senseivita](https://wordpress.org/support/users/senseivita/).
      Reason: Screwed up the title
    -  This topic was modified 1 year, 3 months ago by [senseivita](https://wordpress.org/support/users/senseivita/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [1 year, 3 months ago](https://wordpress.org/support/topic/a-hrefhttps/#post-18342120)
 * I appreciate your effort to adequately explain the issue. I’m sorry but I’m still
   not sure I fully understand. I think the principle issue is that you want these“
   sidebar” elements to be anchored to elements within the central columns? So when
   the central content reflows the sidebar elements move with their anchors so they
   remain vertically related to a particular central element?
 * If that’s the case, the sidebar elements should actually be within the central
   content. For example, an inline image which has text wrapping around it. Then
   such an image can be moved off to the side so that it appears to be within the
   sidebar, even though it’s logically within the central columns. If text wrapping
   is in effect, the text will reflow into the space the image consumed before it
   was moved off to the side.
 * I don’t think the usual block style settings will let you do something like this,
   such as specifying a large negative left margin, but it could be accomplished
   with custom CSS added to the Additional CSS section of the style book. Use the
   Additional CSS Classes block setting field (in the Advanced meta box) to specify
   a custom class attribute that your custom CSS styling can use to identify the
   correct elements. You’ll also need media queries to deal with what should happen
   when there’s not enough room for the sidebars.
 * You may also need to specify that overflow be visible, otherwise such satellite
   elements will disappear when they are moved outside of their anchor’s container.
 *  Thread Starter [senseivita](https://wordpress.org/support/users/senseivita/)
 * (@senseivita)
 * [1 year, 3 months ago](https://wordpress.org/support/topic/a-hrefhttps/#post-18342998)
 * First, thank you for your patience, and for answering, I didn’t expect to see
   an email from WordPress, let alone so soon.
 * I think I got it. I’ve been trying to learn CSS actually, but even without knowing
   anything about it I kinda knew it wouldn’t be possible. I’m basically asking 
   for a broken off content block — well, query loop, I guess — and from what I 
   gather, the most it can be is offset, which would encompass two or more sources,
   not the same.
 * For what it’s worth, I have added some custom classes, only basic stuff though,
   such as blurred gradient backgrounds for instance, and though I don’t quite have
   figured it out yet, you did make help me see things differently by not considering
   the outer columns their own, plus anchors, overflow, queries, margins; all noted.
   I have an idea of where and where not focus learning.
 * This is just for fun thankfully, no pressure, though even if silly, the site 
   is shaping up sort of low key gorgeous with only two finished templates (and 
   one of them doesn’t count because it’s the 404 page,) I’m loving this new WordPress
   since Gutenberg that needs no plugins.
 * Anyway, thanks again!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How do I add spacing to a grid using the block editor?’ is closed to 
new replies.

## Tags

 * [layout](https://wordpress.org/support/topic-tag/layout/)

 * In: [Everything else WordPress](https://wordpress.org/support/forum/miscellaneous/)
 * 2 replies
 * 2 participants
 * Last reply from: [senseivita](https://wordpress.org/support/users/senseivita/)
 * Last activity: [1 year, 3 months ago](https://wordpress.org/support/topic/a-hrefhttps/#post-18342998)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics