Can I display cMap in columns?

The cMap template was not designed to be displayed in a columnar layout, and there are display inconsistencies with the sliding content trays. However, if you are not using those features or are not concerned with the content shifting due to the sliding content tray, you can use the following CSS to force the template into a multiple-column layout.

  1. Install and activate the Code Snippets plugin.
  2. Download this zip file:  code-snippet.zip
  3. Unzip the file. The result will be a JSON file that can be imported into the Code Snippets plugin.
  4. Import the JSON file into Code Snippet.
    1. Choose the “Import” option under the Code Snippets admin menu option.
    2. Choose the JSON file.
    1. Click the “Upload files and import” button.
  5. Activate the imported code snippet.
    1. After completing the Import, navigate to the “All Snippets” admin page.
    2. To activate the Click the toggle for the “Connections cMap :: Grid Layout” so it turns green.

The Code Snippet will run the following code. Alternatively to utilizing the Code Snippets plugin, you can add this code to the theme’s functions.php file or in a utility plugin.

add_action( 
	'cn_template_enqueue_css-cmap',
	static function( $handle ) {
		
		/* Change 1,2,3 to the number of desired columns. */
		$desktop = 3;
		$tablet  = 2;
		$mobile  = 1;
		
		$style = <<<HEREDOC
#cn-cmap .cn-list-body.cn-cmap-is-grid {
	display: grid;
	grid-template-columns: repeat( {$desktop}, minmax( 0, 1fr ) );
	/*grid-auto-rows: 1fr;*/
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	min-height: 0;
	min-width: 0;
}

#cn-cmap .cn-cmap-is-grid .cn-list-section-head {
	display: none;
}

#cn-cmap .cn-cmap-is-grid .cn-list-item {
	display: flex;
	min-width: 0;
}

#cn-cmap .cn-cmap-is-grid .cn-list-item .cn-entry {
	display: relative;
	margin: 0 !important;
	width: 100%;
	overflow: hidden;
}

#cn-cmap .cn-list-body.cn-cmap-is-grid::before,
#cn-cmap .cn-list-body.cn-cmap-is-grid::after {
	content: none;
}

#cn-cmap .cn-cmap-is-grid .cn-left {
	float: none;
	max-width: 100%;
	width: auto;
}

#cn-cmap .cn-cmap-is-grid .cn-list-item .cn-entry > .cn-left {
	text-align: center;
}

#cn-cmap .cn-cmap-is-grid .cn-right {
	text-align: left;
}

#cn-cmap .cn-cmap-is-grid .cn-list-item .cn-entry > .cn-tray-links .cn-left {
	float: left;
}

#cn-cmap .cn-cmap-is-grid .cn-list-item .cn-entry > .cn-tray-links .cn-right {
	text-align: right;
}

#cn-cmap .cn-cmap-is-grid .cn-list-item .cn-entry .cn-tray-links {
	direction: ltr;
}
@media (max-width: 1025px) {
	#cn-cmap .cn-list-body.cn-cmap-is-grid {
		grid-template-columns: repeat( {$tablet}, minmax( 0, 1fr ) );
	}
}
@media (max-width: 513px) {
	#cn-cmap .cn-list-body.cn-cmap-is-grid {
		grid-template-columns: repeat( {$mobile}, minmax( 0, 1fr ) );
	}
}
HEREDOC;
		wp_add_inline_style( $handle, $style );
	},
	11
);
add_filter(
	'cn_list_body_class-cmap',
	static function( $class ) {
		
		$isSingle = cnQuery::getVar( 'cn-entry-slug' ) ? true : false;
		
		if ( ! $isSingle ) {
			$class[] = 'cn-cmap-is-grid';
		}
		
		return $class;
	}
);