Расставил плитки в арку

src/pages/Smbo.jsx

@@ -5,7 +5,7 @@ import ActiveMessagesOnline from "../components/ActiveMessagesOnline"
 
 const platesData = [
   {
-    id: '1',
+    id: 1,
     title: 'Теплогенератор',
     placeHolderId: '1',
     state: 1,
@@ -28,14 +28,14 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c1 r1'
   },
   {
-    id: '2',
+    id: 2,
     title: 'Емкости бурового раствора',
     placeHolderId: '2',
     state: 1,
-    // dc
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
       {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
@@ -55,10 +55,11 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c2 r1'
   },
   {
-    id: '3',
+    id: 3,
     title: 'Подпорные насосы',
     placeHolderId: '3',
     state: 2,
@@ -81,7 +82,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c3 r1'
   },
   {
     id: '4',
@@ -107,7 +109,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c4 r1'
   },
   {
     id: '5',
@@ -133,7 +136,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c5 r1'
   },
   {
     id: '6',
@@ -159,7 +163,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c6 r1'
   },
   {
     id: '7',
@@ -185,7 +190,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c1 r2'
   },
   {
     id: '8',
@@ -211,7 +217,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c6 r2'
   },
   {
     id: '9',
@@ -237,7 +244,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c1 r3'
   },
   {
     id: '10',
@@ -263,7 +271,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c6 r3'
   },
   {
     id: '11',
@@ -289,7 +298,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c1 r4'
   },
   {
     id: '12',
@@ -315,7 +325,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c6 r4'
   },
   {
     id: '13',
@@ -341,7 +352,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c1 r5'
   },
   {
     id: '14',
@@ -367,7 +379,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c6 r5'
   },
   {
     id: '15',
@@ -393,7 +406,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c1 r6'
   },
   {
     id: '16',
@@ -419,7 +433,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c6 r6'
   },
   {
     id: '17',
@@ -445,7 +460,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c1 r7'
   },
   {
     id: '18',
@@ -471,7 +487,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'наработка',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c6 r7'
   },
   {
     id: '19',
@@ -497,7 +514,8 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c1 r8'
   },
   {
     id: '20',
@@ -523,11 +541,13 @@ const platesData = [
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
     captionValue: 'У-У-У-у-у-у',
-    custom: 'Я не понял про это'
+    custom: 'Я не понял про это',
+    className: 'c6 r8'
   },
 ]
 
 const SmboPlates = platesData.map((items) => (
+  <div className={items.className}>
     <SmboPlate title={items.title} state={items.state} operatingTime={items.placeHolderId}>
       <EquipmentDetails
         id={items.id}
@@ -538,6 +558,7 @@ const SmboPlates = platesData.map((items) => (
         state={items.state}
         captionValue={items.captionValue}/>
     </SmboPlate>
+  </div>
   )
 )
 
@@ -547,7 +568,7 @@ export default function Smbo() {
   return (<>
     <div className="smbo_container">
       {SmboPlates}
-      <div className="c2 r5 ce6 center">
+      <div className="c2 r8 ce6 center">
         <ActiveMessagesOnline/>
       </div>