@mesh-grid {
	column-count: 12;
	compile: true;
	container-width: 100%;
	display-type: float;
	gutter-on-outside: true;
	gutter: 30px;
	name: mesh;
	query-condition: min-width;
	responsive-gutter: false;

	@mesh-viewport-sm {
		container-width: 540px;
		viewport: 576px;
	}

	@mesh-viewport-md {
		container-width: 720px;
		viewport: 768px;
	}

	@mesh-viewport-lg {
		container-width: 960px;
		viewport: 992px;
	}

	@mesh-viewport-xl {
		container-width: 1140px;
		viewport: 1200px;
	}
}

@mesh-grid {
	column-count: 12;
	compile: true;
	container-width: 100%;
	display-type: float;
	gutter-on-outside: true;
	gutter: 30px;
	name: mesh;
	naming_column_single: |NAME|-col;
	naming_column_column: |NAME|-col-|COLUMN|;
	naming_column_mq: |NAME|-col-|MQ|-|COLUMN|;
	naming_offset_single: |NAME|-off;
	naming_offset_column: |NAME|-off-|COLUMN|;
	naming_offset_mq: |NAME|-off-|MQ|-|COLUMN|;
	query-condition: min-width;
	responsive-gutter: false;

	@mesh-viewport-sm {
		container-width: 540px;
		viewport: 576px;
	}

	@mesh-viewport-md {
		container-width: 720px;
		viewport: 768px;
	}

	@mesh-viewport-lg {
		container-width: 960px;
		viewport: 992px;
	}

	@mesh-viewport-xl {
		container-width: 1140px;
		viewport: 1200px;
	}
}

Update example with custom naming pattern
[CHANGE] Update example with custom naming pattern

