Add columns for checkboxes and radio buttons

README.md

How to use

1. Upload the CSS.
2. Add the following function to functions.php.

function admin_style() {
	wp_enqueue_style('admin_style', get_stylesheet_directory_uri().'PATH/TO/acf-checkbox-radio-columns.css'); 
}
add_action('admin_init', 'admin_style');

3. Add one of the following classes to Wrapper Attributes on your field two-columns, three-columns or four-columns.

acf-checkbox-radio-columns.css

/* Columns for Checkbox and Radio */
.acf-field-checkbox.two-columns ul,
.acf-field-radio.two-columns ul,
.acf-field-checkbox.three-columns ul,
.acf-field-radio.three-columns ul,
.acf-field-checkbox.four-columns ul,
.acf-field-radio.four-columns ul { 
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;
}

.acf-field-checkbox.two-columns ul,
.acf-field-radio.two-columns ul {
	-webkit-column-count: 2;
	-moz-column-count: 2; 
	column-count: 2;
}

.acf-field-checkbox.three-columns ul,
.acf-field-radio.three-columns ul {
	-webkit-column-count: 3;
	-moz-column-count: 3; 
	column-count: 3;
}

.acf-field-checkbox.four-columns ul,
.acf-field-radio.four-columns ul {
	-webkit-column-count: 4;
	-moz-column-count: 4; 
	column-count: 4;
}

@media screen and (max-width: 782px) {
	.acf-field-checkbox.two-columns ul,
	.acf-field-radio.two-columns ul,
	.acf-field-checkbox.three-columns ul,
	.acf-field-radio.three-columns ul,
	.acf-field-checkbox.four-columns ul,
	.acf-field-radio.four-columns ul { 
		-webkit-column-count: auto;
		-moz-column-count: auto;
		column-count: auto;
		-webkit-column-gap: normal;
		-moz-column-gap: normal;
		column-gap: normal;
	}
}