To create a grid in JavaScript, create a
div
with display: grid
, then add all your cells to it.So if this is your div
:
<div id="my-div"></div>
Then you can create a 3x5
grid in it with this JavaScript:
document.getElementById("my-div").innerHTML = `
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
<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>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
`;
How to change the number of columns?
Change the 3
in repeat(3, 1fr)
to change the number of columns.