Gutenberg Columns Block and Gallery Block CSS Fix (.scss version)

rt-gutenberg-block-grid-support.scss

/* Gutenberg Columns Block (Beta) Responsive CSS Fix */
.wp-block-columns {
	display: grid;
	grid-gap: 1rem;
	grid-auto-flow: dense;

	.layout-column-1 {
		grid-column: 1;
	}
	.layout-column-2 {
		grid-column: 2;
	}
	.layout-column-3 {
		grid-column: 3;
	}
	.layout-column-4 {
		grid-column: 4;
	}
	.layout-column-5 {
		grid-column: 5;
	}
	.layout-column-6 {
		grid-column: 6;
	}

	&.has-6-columns {
		grid-template-columns: repeat( 6, 1fr );
	}

	&.has-5-columns {
		grid-template-columns: repeat( 5, 1fr );
	}

	&.has-4-columns {
		grid-template-columns: repeat( 4, 1fr );
	}

	&.has-3-columns {
		grid-template-columns: repeat( 3, 1fr );
	}

	&.has-2-columns {
		grid-template-columns: repeat( 2, 1fr );
	}

	@media only screen and (max-width: 812px) {

		&.has-4-columns, &.has-5-columns, &.has-6-columns {
			grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
		}
	}

	@media only screen and (min-width: 450px) and (max-width: 812px) {

		.layout-column-1,.layout-column-3 {
			grid-column: 1;
		}

		.layout-column-2, .layout-column-4 {
			grid-column: 2;
		}

	}

	@media only screen and (max-width: 450px) {

		&.has-2-columns, &.has-3-columns, &.has-4-columns, &.has-5-columns, &.has-6-columns {
			grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
		}

		.layout-column-2, .layout-column-3, .layout-column-4 {
			grid-column: 1;
		}

	}

	@media only screen and (max-width: 375px) {

		&.has-2-columns, &.has-3-columns, &.has-4-columns, &.has-5-columns, &.has-6-columns {
			grid-template-columns: 1fr;
		}
	}

}


/* Gutenberg Gallery Responsive CSS Fix */
.wp-block-gallery {

	display: grid;
	grid-auto-flow: dense;
	grid-gap: 0.8rem;

	&.columns-6 {
	    grid-template-columns: repeat( 6, 1fr );
	}
	&.columns-5 {
	    grid-template-columns: repeat( 5, 1fr );
	}
	&.columns-4 {
	    grid-template-columns: repeat( 4, 1fr );
	}
	&.columns-3 {
	    grid-template-columns: repeat( 3, 1fr );
	}
	&.columns-2 {
	    grid-template-columns: repeat( 2, 1fr );
	}

	@media only screen and (min-width: 450px) and (max-width: 550px) {

		&.columns-3, &.columns-4, &.columns-5, &.columns-6 {
	    		grid-template-columns: repeat( 3, 1fr);
		}

	}

	@media only screen and (max-width: 450px) {

		&.columns-2, &.columns-3, &.columns-4, &.columns-5, &.columns-6 {
	    		grid-template-columns: repeat( 2, 1fr );
		}
	}

	.blocks-gallery-item {
		margin: 0;
		padding: 0;
	}

}