Making equal squares and putting alphabets and numbers outside

I used this as a reference to create a 12 by 8 squares(which are showing as rectangles) as shown in my JSFiddle below:


Few things I’m trying to get fixed:

  1. Since I’ve Some text... , the size of all rectangles are same. but if I remove the paragraph tag, the size is disturbed.

  2. Also, I want these divs as squares and not as rectangles as they are showing now. How can I make them look like squares?

  3. Can I just have A , B, CH on the left side (outside of these square and not inside) and similarly, the number 1 , 212 on top of each square?

Once this is done, I will be using these divs for HTML drag and drop of elements from somewhere else onto these squares.

1 Like

I did this using grid instead of floating, but the concepts should be the same. Just move the values where you want them…if I understood what you were looking for…


I just borrowed Dave’s version and adjusted for auto columns. :slight_smile:

Without knowing the precise use case its difficult to give an exact answer because we don’t know what content is going inside the box and whether it should alter the height or width accordingly.

1 Like

Thanks. Do you think if the grid can be like this (here’s my handwritten photo of how the grid should look like):

Basically, I want all the squares to be next to each other as shown in the photo above.

Numbers are only going to be from 1-12 and alphabets are only going to be from A to H as shown in the image.

The text that I’m going to drag onto one of the squares of this grid is going to be max 10 characters as of now so I’m not expecting any paragraph kind of text.

Also, since this grid is going to be a drop zone for my dragged items, I would like to see this grid on the right hand side of the screen so that I can have a smaller grid on the left size (which would just be a one column of rectangle (containing 10 character text) and 96 rows accomodating 96 squares of the grid.

Sorry about not including this info in the first place.Please let me know if I can answer more questions.

An alternative approach is to use an HTML table:


Thanks. Is using an HTML table (not divs) going to be okay since I’m planning to use the grid as a drop zone for small text inside the grid ?

And I believe since I’m dragging some text onto the squares, it will require me to give id to each and every table row so wondering if it’s equivalent to using as divs?

I have copied all the JavaScript from the example on this MDN page:

Within the HTML, I have set the ID of the A1 table cell to “A1” and have chosen the text to be dragged. (The purists around here will not like the inline event handling.)

The drag to cell A1 works:

Thanks. That looks good. I will probably be needing something similar where I have multiple things like drag to A1 , drag to A2 etc.

I am wondering if it’s possible to trigger these drag events based on a button click. For example, if I want to drag 96 text content to all the squares, it’s a bad approach to have the user drag 96 text elements 96 times.

I made the text “drag to A1” because it is the only cell that I have so far given an ID to (and have deleted the original “some text…” content). If all cells are given unique IDs then you would be able to drag that text to any cell (with the addition of ondrop="drop(event)" ondragover="allowDrop(event)").

I found that if you drag text to a cell that already has text in it then the cell ends up containing both texts. However I expect you could add JavaScript to delete the original text in a cell just before dropping the new text.

Perhaps I am not understanding what you are trying to achieve, but if youi wish to click a button to put text in all 96 cells then surely that can be done by JavaScript directly without any dragging and dropping.


Sure. That’s actually easier than what I was understanding of your first explanation. But it uses two pseudo elements on the item class instead of one. Very similar to Paul’s use of before and after, but the column labels are only shown on the first row and the first column.

/* letter - you'll want to use 12n-11 */
.item:nth-of-type(6n-5)::before {
  content: counter(rowCount, upper-alpha);
  position: absolute;
  top: 45%;
  left: -1.75rem;
  color: red;
/* letter - you'll want to use n+12 */
.item:nth-of-type(-n+6)::after {
  content: counter(columnCount);
  position: absolute;
  top: -2rem;
  left: 50%;
  color: red;

I tweaked my last example for you


Ha ha you beat me to it :slight_smile:

Here’s my updated version.

This will stay in perfect squares unlike the table version as you expand and contract the page.


I found an old demo of mine that was using jquery & Ui drag and drop so I swapped it into the grid as an example.

It might be useful (or it might not). I’m sure of of the JS gurus here could translate it into vanilla js if asked nicely :wink:

1 Like

I’m not a JS guru but here, using the table approach, I have added vanilla JavaScript to add unique IDs and event handlers to every cell: This could be done within the HTML.

This table approach keeps the cells square unless the text in any one cell cannot fit into its cell. The row and/or column dimensions will then automatically adjust to try to keep all the text in the table legible. I see that as an advantage of using a table.


Thanks, @PaulOB and @Archibald and others.

PaulOB’s demo is quite close to what I am looking for with a list showing on the left-hand side with a drag-and-drop feature.

I have a new question for everyone:

Let’s say I have a button in between the blue list in PaulOB’s demo and clicking the button moves the texts from the blue list to the predefined squares. I guess regardless, of which way we do it (drag and drop approach or click a button approach), there’s going to be some text sitting inside some squares depending upon the list size.

If I want to store the square-related details in my database, do I need to get the coordinates of each square and store them in the database? Is getting a coordinate approach (if I’m thinking in the right direction about getting a coordinate) going to work with both approaches (as suggested by Archibald and PaulOB)?

The reason I want to store it in a database is because next time someone opens the page, after closing my web application, I would like to show them the text at each square where it was dragged over by a previous user OR based on the button clicked by the previous user.

Thanks again!

To keep things simple, I suggest saving the table’s HTML to a file on your server. Then to show them the text at each square just insert that table HTML into the HTML of the page…

What will happen if two or more people are interacting with your web page at the same time?

Hmm. Or save the HTML of the table in one of the columns of the table in the database?

Forgot to mention in my earlier post that I will also need to have the functionality to edit the text sitting in a square on the fly (Probably I will have to button somewhere outside the table of squares which will lock users from editing anything at some point. ). So thinking if saving a file or saving the HTML to a table approach would be a workable solution or not.

Yeah, I need to think about it. I believe only one person will be doing such a thing right now but I need to double check this requirement.

I don’t see that you need a database at all, but I have very little understanding of what you are trying to achieve :grinning:.

If you edit my CodePen in post #13 so the forEach becomes:

cells.forEach((cell,index) => {
  cell.setAttribute("id", ("cell"+index) );
  cell.addEventListener("drop", drop);
  cell.addEventListener("dragover", allowDrop);
  cell.contentEditable = true;                // added

Then the text in each cell become editable. So you could have a version of your web page at a secret URL to enable you to edit cell text.

1 Like

Thanks and I can understand that I might not be explaining it well. :slight_smile:
Appreciate your understanding on this thus far.

The reason I was thinking of bringing the database here is to address the following scenario:

Let’s say a user is working on the webpage and some texts were dragged onto squares or using a button approach I discussed in my earlier post. Now user decides to close his browser, shut down his computer, and plans on coming back to resume his work later, then I would like to start the grid with prefilled text-related information (which was done by the user before shutting his computer).

Any idea why this demo is showing letters till I and the previous demo showed till H which is what I am looking for. I was comparing both the CSS and they look similar. I believe I didn’t understand this part.

I just copied and pasted the row one too many times. The letters are automatic and will increment or decrement with the amount of html present. I just deleted the last eight items in my demo so it should show to H now.

If you are wanting users to save their place when they revisit then you would need to save something locally (session storage or cookie etc) or indeed save on your server for each user in a database. It depends on how complex you expect things to get. I’m assuming that each user is just saving something of their own rather than changing the one page that is online (like a wiki).

I suggest that you get the functionality you want first with the layout then once happy with the layout you post another separate question in the appropriate forum when you decide how to handle your data. It may be a PHP, JS, or database question in those cases rather than the html/css forum.

The demo by @Archibald does much the same thing (apart from the styling and the ability to return the item back to where it was picked from). It would be suitable for your purposes also I believe if you preferred not using the Js libraries that were in mine.

Choices choices choices…

1 Like