Gutenberg: Grid system is not responsive for the columns block

[alextseitlin]

On width 600px the 2 columns fall under each other and create an empty space on the right. But they should fill the whole space. This issue is the same with more than 2 columns.

To Reproduce

1. Add 2 columns
2. Make the width little smaller than 600px
   

Possible fix
wp-block-column is using margins for gaps:

Using paddings will fix this issue.

[designsimply]

Possibly related: #12640.

[m-e-h]

Yep, all sort of related I think:
https://github.com/WordPress/gutenberg/pull/12199
https://github.com/WordPress/gutenberg/issues/12640
https://github.com/WordPress/gutenberg/pull/12408

@drdogbot7 has a couple nice codepens of the issue in https://github.com/WordPress/gutenberg/pull/12408

[IvanPr]

The Wordpress 5.1 is out but this issue still remains...

[youknowriad]

@IvanPr This kind of comments on multiple issues don't really help. If you want to move things forward, maybe you could take a stab at these?

[IvanPr]

Sure, here are the CSS rules that solved an issue for me:

.has-3-columns > .wp-block-column:last-child {
  margin-right: 0;
}

@media (max-width: 781px) {

  .has-2-columns > .wp-block-column,
  .has-3-columns > .wp-block-column,
  .has-4-columns > .wp-block-column {
    flex-basis: calc(50% - 32px);
    flex-grow: 0;
  }

  .has-4-columns > .wp-block-column:nth-child(odd) {
    margin-left: 0;
    margin-right: 32px;
  }

  .has-4-columns > .wp-block-column:nth-child(even) {
    margin-right: 0;
  }

  .has-3-columns {
    flex-flow: row wrap;
  }

  .has-3-columns .wp-block-column:first-child {
    flex-basis: 100%;
    margin-right: 0;
  }

  .has-3-columns > .wp-block-column:nth-child(even) {
    margin-left: 0;
    margin-right: 32px;
  }

  .has-3-columns > .wp-block-column:nth-child(odd) {
    margin-right: 0;
  }
}

@media (max-width: 599px) {
 .has-2-columns > .wp-block-column,
 .has-3-columns > .wp-block-column,
 .has-4-columns > .wp-block-column {
  flex-basis: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
 }
}

[youknowriad]

This seems fixed in my testing.