Sass version of the WordPress column block.

_wp-block-columns.scss

.wp-block-columns {
	display: flex;
	margin-bottom: $gutter;
	flex-wrap: wrap;
}

@media (min-width: 782px) {
	.wp-block-columns {
		flex-wrap: nowrap;
	}
}

.wp-block-column {
	flex-grow: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

@media (max-width: 599px) {
	.wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (min-width: 600px) {
	.wp-block-column {
		flex-basis: calc(50% - #{$gutter--half});
		flex-grow: 0;
	}

	.wp-block-column:nth-child(2n) {
		margin-left: $gutter;
	}
}

@media (min-width: 782px) {
	.wp-block-column:not(:first-child) {
		margin-left: $gutter;
	}
}

.wp-block-columns.are-vertically-aligned-top {
	align-items: flex-start;
}

.wp-block-columns.are-vertically-aligned-center {
	align-items: center;
}

.wp-block-columns.are-vertically-aligned-bottom {
	align-items: flex-end;
}

.wp-block-column.is-vertically-aligned-top {
	align-self: flex-start;
}

.wp-block-column.is-vertically-aligned-center {
	-ms-grid-row-align: center;
	align-self: center;
}

.wp-block-column.is-vertically-aligned-bottom {
	align-self: flex-end;
}