How can I make grid input boxes nxn in a div using CSS?

Question

I want to make N input boxes placed to create an NxN input area square. I tried it using <br> after each N square placed. But this was not resulted as I want. Because there are spaces between squares and that's something I don't want. Also using <br> isn't a good way to do this, I think. Is there another way to make this thing succesfully?

My codes to create a 3x3 square:

 .box {
   margin-right: 0px;
   width: 30px;
   height: 30px;
   box-sizing: border-box;
 }

<div>
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <br>
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <br>
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
</div>

Nenad Vracar · Accepted Answer · 2016-05-07T09:16:13.527

2

You can set width on div and remove white-space's

div {
  width: 90px;
}
.box {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}

<div>
  <input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text">
</div>

You can also use Flexbox

div {
  display: flex;
  flex-wrap: wrap;
  width: 90px;
}
.box {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}

<div>
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
  <input class="box" type="text">
</div>

edited May 07 '16 at 09:16

answered May 07 '16 at 09:01

Nenad Vracar

118,580
15
151
176

Thanks, but this code doesn't work for me. So I can't get the result as same above. I can't understand why. Am I missing something? My result http://uploads.im/cO3Pm.png – Ali Tor May 07 '16 at 09:12
You need to remove `white-space` from `HTML`. Copy paste my html and try again. – Nenad Vracar May 07 '16 at 09:14
Ok. It is done. I was wrong about the white space. But the line takes so much place in IDE. Is this always done like this? – Ali Tor May 07 '16 at 09:19
You can read more here http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – Nenad Vracar May 07 '16 at 09:22

How can I make grid input boxes nxn in a div using CSS?

1 Answers1