diff --git a/Classes/Controller/OverviewController.php b/Classes/Controller/OverviewController.php
index f9035a789c656c2f5adbd3c36b87d4fbab3af2e6..00bcf18e99dc724ed0e545d976e81c6e633c152c 100644
--- a/Classes/Controller/OverviewController.php
+++ b/Classes/Controller/OverviewController.php
@@ -123,6 +123,36 @@ class OverviewController extends AbstractController {
 					break;
 			}
 		}
+
+		$this->setupGridColumns();
+	}
+
+	/**
+	 * Assign the grid column classes to the frontend
+	 *
+	 * @return void
+	 */
+	protected function setupGridColumns(): void {
+		if (!isset($this->settings['gridColumns'])) {
+			$this->view->assign('gridColumnClasses', 'col-md-4 col-sm-6 col-xs-12');
+			return;
+		}
+
+		$columnAmount = (int) $this->settings['gridColumns'];
+		$columnClasses = '';
+
+		switch ($columnAmount) {
+			case 4:
+				$columnClasses .= 'col-lg-3 ';
+			case 3:
+				$columnClasses .= 'col-md-4 ';
+			case 2:
+				$columnClasses .= 'col-sm-6 ';
+			default:
+				$columnClasses .= 'col-xs-12';
+		}
+
+		$this->view->assign('gridColumnClasses', $columnClasses);
 	}
 
 	/**
diff --git a/Configuration/FlexForms/Overview.xml b/Configuration/FlexForms/Overview.xml
index 279dd4bed2154801d1f66af0ca9aa74ed9c719a4..10b59fda4f6bbbac6dcaddcc5f0e878460b3b5f2 100644
--- a/Configuration/FlexForms/Overview.xml
+++ b/Configuration/FlexForms/Overview.xml
@@ -239,23 +239,23 @@
 							<config>
 								<type>select</type>
 								<renderType>selectSingle</renderType>
-								<default>col-md-4 col-sm-6 col-xs-12</default>
+								<default>3</default>
 								<items>
 									<numIndex index="0">
 										<numIndex index="0">LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.gridColumns.1</numIndex>
-										<numIndex index="1">col-xs-12</numIndex>
+										<numIndex index="1">1</numIndex>
 									</numIndex>
 									<numIndex index="1">
 										<numIndex index="0">LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.gridColumns.2</numIndex>
-										<numIndex index="1">col-sm-6 col-xs-12</numIndex>
+										<numIndex index="1">2</numIndex>
 									</numIndex>
 									<numIndex index="2">
 										<numIndex index="0">LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.gridColumns.3</numIndex>
-										<numIndex index="1">col-md-4 col-sm-6 col-xs-12</numIndex>
+										<numIndex index="1">3</numIndex>
 									</numIndex>
 									<numIndex index="3">
 										<numIndex index="0">LLL:EXT:sg_news/Resources/Private/Language/locallang_db.xlf:plugin.flexForm.gridColumns.4</numIndex>
-										<numIndex index="1">col-lg-3 col-md-4 col-sm-6 col-xs-12</numIndex>
+										<numIndex index="1">4</numIndex>
 									</numIndex>
 								</items>
 							</config>
diff --git a/Resources/Private/Templates/Overview/Overview.html b/Resources/Private/Templates/Overview/Overview.html
index 69e998fa065b68a0ffcde8ad8be4f887375bf681..1538104f9f84b4923c4178dc4b71ea434922ad66 100644
--- a/Resources/Private/Templates/Overview/Overview.html
+++ b/Resources/Private/Templates/Overview/Overview.html
@@ -58,7 +58,7 @@
 							<ul class="tx-sgnews-list tx-sgnews-list-{dataItems.record.uid} row" data-record="{dataItems.record.uid}">
 								<f:for each="{dataItems.newsMetaData}" as="newsMetaDataEntry">
 									<f:if condition="{newsMetaDataEntry.news}">
-										<li class="{f:if(condition: '{settings.gridColumns}', then: '{settings.gridColumns}', else: 'col-md-4 col-sm-6 col-xs-12')}">
+										<li class="{gridColumnClasses}">
 											<f:render partial="Teaser" arguments="{
 											newsMetaData: newsMetaDataEntry,
 											headerTag: '<h2>',
@@ -92,7 +92,7 @@
 <f:section name="content">
 	<ul class="tx-sgnews-list tx-sgnews-list-0 row" data-record="0">
 		<f:for each="{allNews}" as="newsMetaDataEntry">
-			<li class="{f:if(condition: '{settings.gridColumns}', then: '{settings.gridColumns}', else: 'col-md-4 col-sm-6 col-xs-12')}">
+			<li class="{gridColumnClasses}">
 				<f:render partial="Teaser" arguments="{
 								newsMetaData: newsMetaDataEntry,
 								headerTag: '<h2>',
diff --git a/Resources/Private/Templates/Overview/OverviewWithoutCategories.html b/Resources/Private/Templates/Overview/OverviewWithoutCategories.html
index 94025555e5b72f92f45781ffd9957c60394f3d62..f1839f91f8ac6ff3ec81ff96df463c8bd3b3d5c1 100644
--- a/Resources/Private/Templates/Overview/OverviewWithoutCategories.html
+++ b/Resources/Private/Templates/Overview/OverviewWithoutCategories.html
@@ -18,7 +18,7 @@
 			<f:then>
 				<ul class="tx-sgnews-list tx-sgnews-list-0 row" data-record="0">
 					<f:for each="{newsMetaData}" as="newsMetaDataEntry">
-						<li class="{f:if(condition: '{settings.gridColumns}', then: '{settings.gridColumns}', else: 'col-md-4 col-sm-6 col-xs-12')}">
+						<li class="{gridColumnClasses}">
 							<f:render partial="Teaser" arguments="{
 											newsMetaData: newsMetaDataEntry,
 											headerTag: '<h2>',