TailwindCSS grid-cols with a margin for each new row

Hello,

I'm using TailwindCSS.

I need to display datas in hexagones. The CSS for the hexagone is ok.

The problem is that I don't know how many hexagones will be displayed, it depends on the amount of datas retrieved from the database, it can be 3 or 27.

To display the hexagones, I'm using a grid grid-cols-10, so if I have 15 hexagones, a new line is created automatically.

But so that the hexagones display correctly as in a honeycomb, I need to display each new line with some additional CSS (margin left and margin top).

It's possible to do that like this.

<div class="grid grid-cols-10 gap-1">
	<div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
	</div>

	<div> // new line, margin left for the entire line
		<div>11</div>
		<div>12</div>
		<div>13</div>
		<div>14</div>
		<div>15</div>
	</div>
</div>

But is it possible to add a margin to the new lines just by manipulation the grids-rows ?

<div class="grid grid-cols-10 gap-1">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>11</div> // new line, margin left and margin top for the entire new line
	<div>12</div>
	<div>13</div>
	<div>14</div>
	<div>15</div>
</div>

Thanks for your help.

V