Skip to content
← Back to Community
HTML Grid
Profile icon
Smart0ne

Is there any way to make a square grid instead of making a table?

Voters
Profile icon
yongboki
Profile icon
EthanChester
Profile icon
WilliamExtenWri
Profile icon
CoolGuy27
Profile icon
RolandJLevy
Profile icon
Smart0ne
Comments
hotnewtop
Profile icon
fuzzyastrocat

Just use a table. This is exactly what tables were designed for — so using them here will be easiest.

However, if you're bent on not using tables you can use Coder100's answer. I would like to clarify how it works: The number of 100px's in grid-template-columns determines how many columns there are. So if you did:

<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
.container { display: grid; grid-template-columns: 100px 100px 100px; }

... it would show up as:

1 2 3 4 5 6

If you did

.container { display: grid; grid-template-columns: 100px; }

... it would show up as:

1 2 3 4 5 6

In the repl they shared with you, they're using repeat, which does exactly what I've done here except you don't have to write out 100px 100px 100px... over and over (instead, you just give repeat the number of times to write it).

Profile icon
Smart0ne

@fuzzyastrocat Wait... what if I want 400 small square arranged in a 20x20 grid? If I don't copy-paste the divs, the squares won't show up...

Profile icon
fuzzyastrocat

@Smart0ne Well, if you do it with HTML you're going to have to create the divs at somehow, so I would suggest using JS to generate the divs automatically.

In your html, you can do something like this:

<div class="container"> <script src="./genGrid.js"></script> </div>

And in ./genGrid.js, you put the following:

for(let i = 0; i < 400; i ++) { let elem = document.createElement("div"); elem.innerHTML = your_text; document.body.getElementsByClassName("container")[0].appendChild(elem); }

Where 400 is the number of squares you want to have, and your_text is the text you want to put in each square.

Profile icon
AnthonyMouse

You can also add a border around all of the child divs to make it look more like a table. @fuzzyastrocat

Profile icon
Smart0ne

@fuzzyastrocat :omighty:

Profile icon
Smart0ne

@fuzzyastrocat ... it doesn't show the grid...

Profile icon
fuzzyastrocat

@Smart0ne Could you share a repl?

Profile icon
Smart0ne
Profile icon
Coder100

Hello, world! Use display: grid

Some say flexbox but I like grid ok bye

Here is a great example

Profile icon
Coder100

With only CSS and HTML, it can be as easy as:

<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
.container { display: grid; grid-template-columns: 100px 100px; }

read more

Profile icon
realTronsi

@Coder100 or flex box lel

Profile icon
Coder100
Profile icon
Coder100

i have never used flex box :( @realTronsi

Profile icon
Smart0ne

@Coder100 :O Lemme try that.

Profile icon
realTronsi

@Coder100 bet you'll hit 8k before next month

Profile icon
Coder100
Profile icon
Coder100

statistics do say so but idk @realTronsi

Profile icon
Coder100

no extrapolating!! @realTronsi

Profile icon
realTronsi

@Coder100 Ok I bet you will hit 27.3k cycles in the next 54.14 minutes

Profile icon
Smart0ne

@Coder100 Wait in your code, are the div elements for 1, 2, 3, 4, .. columns?

Profile icon
Coder100
Profile icon
Coder100

they are just divs @Smart0ne

Profile icon
Smart0ne

@Smart0ne I'm wondering why it's not working.

Profile icon
Coder100

does your browser support [email protected]

Profile icon
Smart0ne

@Coder100 I'm on the latest version of Chrome.

Profile icon
Coder100
Profile icon
Coder100

send screenshot @Smart0ne

Profile icon
Smart0ne

@Smart0ne Wait nvm it's working.

Profile icon
Smart0ne

@Smart0ne Also a question, the output is

1
2
3
4
5
6

How do I make multiple columns?

Profile icon
Coder100

um math lol @Smart0ne

Profile icon
Coder100

it's not really like grid ig, it has all the capabilities, but its like comparing a functional language to a class-based language lol @Smart0ne

Profile icon
Smart0ne
Profile icon
Smart0ne

@Coder100 :( :( So can it do multiple columns or not?

Profile icon
Coder100

yes it can @Smart0ne

Profile icon
Coder100

im making a quick example to show you @Smart0ne

Profile icon
Coder100

also didn't you read the website @Smart0ne

Profile icon
Smart0ne

@Coder100 Oops I'm so sorry, I missed the website. :D

Profile icon
Smart0ne

@Smart0ne Wait I'm just curious, what happens if I mark myself the correct answer? Will repl.it just block it or something like that?

Profile icon
Coder100
Profile icon
Coder100

it won't do anything lol @Smart0ne

Profile icon
Coder100

so what happens is it does the usual confirm and then, nothing happens @Smart0ne

Profile icon
Coder100

@Smart0ne trivia: because of how the API works, if you could mark yourself as the correct answer, you can get as many cycles as you want.

Profile icon
Smart0ne

@Coder100 True. Imma just mark you as the correct answer.

Profile icon
Smart0ne

@Smart0ne Wait, I want a grid with 20 columns and 20 rows, so I need to start copying and pasting?

Profile icon
Coder100
Profile icon
Coder100

there's a repeat() for that lol @Smart0ne

Profile icon
Coder100

unless you want all the rows/columns to be diff width/height lol @Smart0ne

Profile icon
Smart0ne

@Coder100 :O

(my silently playing the Switcheroo while waiting for an answer)

Profile icon
Smart0ne

@Coder100 I invited you to a repl.it, so can you take a look at what I mean by copy and pasting the div? Basically, without the divs, the border won't show up, so I'm basically forced to copy-paste the divs 400 times, which isn't my favourite thing to do.

Profile icon
RolandJLevy

@Coder100 and @fuzzyastrocat I agree - grid is best for this approach. Here is a grid I used at work recently which has media queries to make it responsive: https://repl.it/@rjlevy/css-responsive-blocks-using-grid#style.css

Profile icon
Coder100

wow, that's so responsive @rjlevy

Profile icon
Coder100

3 breakpoints!! @rjlevy

Profile icon
RolandJLevy
Profile icon
RolandJLevy
Profile icon
Coder100
Profile icon
fuzzyastrocat

@rjlevy Nice, that's cool! I agree that grid is best since SmartOne has said they want to make a 20x20 grid (very uniform) — my point to Coder100 was that tables are still useful.

Profile icon
RolandJLevy

Hi @fuzzyastrocat, thanks! yes, I agree there are instances where tables are a good choice - mainly for displaying a table of data which is what tables were created for.

Profile icon
Coder100

ew why would you use tables

Profile icon
realTronsi

@Coder100 YES I got u to 7k cycles congrats

Profile icon
Coder100

yey thanx @realTronsi

Profile icon
realTronsi

@Coder100 time for you to make a self driving car to celebrate 7k cycles

Profile icon
Coder100
Profile icon
lolguineapig

The best way is to use display:grid in CSS. You can use the

Profile icon
mwilki7

I got fed up with tables and grids that I just used row column and did it that way, much easier

If I wanted a 3x3 grid:

CSS:

.row { /*border : 2px dotted red ;*/ margin : 5px ; display: flex ; } .column { /*border : 2px dotted yellow ;*/ border-radius : 5px ; margin : 5px ; width : 100% ; font-size : 20px ; }

HTML:

<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>

image

Profile icon
Pankak

What do you mean by square grid? A square grid is a table

Profile icon
adsarebbbad

square grid? use while loops in your js

Profile icon
Smart0ne

@adsarebbbad Sorry I don't understand you. How would I implement this using while loops?

Profile icon
adsarebbbad

well, you would need p5 @Smart0ne

Profile icon
Smart0ne
Profile icon
adsarebbbad

have an x and y variable run for(let x = 0; x < 2; x++)
and nest another for loop with y instead but idk the number values you can figure them out yourself @Smart0ne

Profile icon
adsarebbbad
Profile icon
Smart0ne

@adsarebbbad That doesn't really make sense, as in what do I put in the loop?

Profile icon
adsarebbbad

line(nth, nth, nth, nth) in the y loop and the x loop you figure out the values yourself i already gave you a good explanation @Smart0ne

Profile icon
Coder100

bruh why use p5 smh @Smart0ne

Profile icon
adsarebbbad

why not? @Coder100

Profile icon
Coder100

i mean you could do this in only CSS and HTML @adsarebbbad

Profile icon
Coder100

having a canvas makes things well... harder @adsarebbbad

Profile icon
Smart0ne

@Coder100 Um... okay.

Profile icon
adsarebbbad

i think its a bit easier in p5 or processing @Coder100

Profile icon
Coder100

@adsarebbbad but thats canvas too overkill

Profile icon
adsarebbbad
Profile icon
fuzzyastrocat

@adsarebbbad @Coder100 @SmartOne Using a table here would make this easy...

Profile icon
Coder100

tables are bad we only use them for data >:( @fuzzyastrocat

Profile icon
fuzzyastrocat

@Coder100 Why are tables bad? If you know how to use them properly they are extremely powerful.

Profile icon
Coder100
Profile icon
Coder100

do not use them for design only for data @fuzzyastrocat

Profile icon
fuzzyastrocat

@Coder100 And did @SmartOne say anything about using them for design? Based on the question, it seems like a data-y situation.

Profile icon
Coder100

keyword: grid @fuzzyastrocat

Profile icon
fuzzyastrocat

@Coder100 Grid does not mean it's going to be used for design. For instance, I would describe making a Tic-Tac-Toe board as a grid. But using tables for that is a perfectly valid application.

Profile icon
Coder100
Profile icon
Coder100

hmm ig you haven't read much HTML books yet, but that used to happen, and people hated it so it doesn't happen anymore @fuzzyastrocat

Profile icon
fuzzyastrocat

@Coder100 Lol, I've read 0 books on programming. Everything I know is from the internet and trial-and-error :D

Perhaps tic-tac-toe was a bad example, since that could be considered layout rather than content. But my point here is that tables are still useful.

Profile icon
fuzzyastrocat

@Coder100 Wait, I just realized — are you talking about

or CSS
table-layout
? I've been talking about the latter, but given your most recent comment I suspect you mean the former.