Ask coding questions

← Back to all posts
HTML Grid
Smart0ne

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

Voters
WilliamExtenWri
CoolGuy27
RolandJLevy
Smart0ne
Comments
hotnewtop
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:

... it would show up as:

If you did

... it would show up as:

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).

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...

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:

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

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

AnthonyMouse

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

Smart0ne

@fuzzyastrocat :omighty:

Smart0ne

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

fuzzyastrocat

@Smart0ne Could you share a repl?

Smart0ne
Coder100

Hello, world! Use display: grid

Some say flexbox but I like grid ok bye

Here is a great example

Coder100

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

read more

realTronsi

@Coder100 or flex box lel

Coder100
Coder100

i have never used flex box :( @realTronsi

Smart0ne

@Coder100 :O Lemme try that.

realTronsi

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

Coder100
Coder100

statistics do say so but idk @realTronsi

Coder100

no extrapolating!! @realTronsi

realTronsi

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

Smart0ne

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

Coder100
Coder100

they are just divs @Smart0ne

Smart0ne

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

Coder100

does your browser support [email protected]

Smart0ne

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

Coder100

hmmm @Smart0ne

Coder100

send screenshot @Smart0ne

Smart0ne

@Smart0ne Wait nvm it's working.

Smart0ne

@Smart0ne Also a question, the output is

1
2
3
4
5
6

How do I make multiple columns?

Coder100

um math lol @Smart0ne

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

Smart0ne
Smart0ne

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

Coder100

yes it can @Smart0ne

Coder100

im making a quick example to show you @Smart0ne

Coder100

also didn't you read the website @Smart0ne

Smart0ne

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

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?

Coder100
Coder100

it won't do anything lol @Smart0ne

Coder100

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

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.

Smart0ne

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

Smart0ne

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

Coder100
Coder100

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

Coder100

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

Smart0ne

@Coder100 :O

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

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.

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

Coder100

wow, that's so responsive @rjlevy

Coder100

3 breakpoints!! @rjlevy

RolandJLevy
RolandJLevy
Coder100

waw @rjlevy

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.

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.

Coder100

ew why would you use tables

realTronsi

@Coder100 YES I got u to 7k cycles congrats

Coder100

yey thanx @realTronsi

realTronsi

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

Coder100
lolguineapig

The best way is to use display:grid in CSS. You can use the <div> tag too. Read more about it here: https://www.w3schools.com/css/css_grid.asp

Hope this helps
lolguineapig :)

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:

HTML:

Pankak

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

adsarebbbad

square grid? use while loops in your js

Smart0ne

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

adsarebbbad

well, you would need p5 @Smart0ne

Smart0ne
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

adsarebbbad

yeah @Smart0ne

Smart0ne

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

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

Coder100

bruh why use p5 smh @Smart0ne

adsarebbbad

why not? @Coder100

Coder100

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

Coder100

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

Smart0ne

@Coder100 Um... okay.

adsarebbbad

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

Coder100

@adsarebbbad but thats canvas too overkill

adsarebbbad
fuzzyastrocat

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

Coder100

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

fuzzyastrocat

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

Coder100
Coder100

do not use them for design only for data @fuzzyastrocat

fuzzyastrocat

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

Coder100

keyword: grid @fuzzyastrocat

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.

Coder100
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

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.

fuzzyastrocat

@Coder100 Wait, I just realized — are you talking about <table> or CSS table-layout? I've been talking about the latter, but given your most recent comment I suspect you mean the former.