Kevin Powell - Community•17mo ago

Grid issues

Okay so, I've been fiddling with this for over 30 minutes, trying various things but I just don't get the result I want https://codepen.io/BrightDN-the-sasster/pen/RwEroVO THis is the codepen, basically I need the items in the grid to be square and have the size of the border around adjusted to the size of the bingo (For some reason I'm even failing to get that right lol) (As this is a 3x3, the squares can be a bit bigger just have to make sure it doesn't end up requiring scrolling as Id love this design to work both phone and pc alike) If you look on the codepen, I got them square, but the grid is...Still big, bigger than the items it contains lol But I was also wondering if it is possible to automatically change it depending on gridSize it goes from 3x3 all the way to 7x7 obv the 7x7 requiring the smallest possible options I was already thinking of doing it with a switch in javascript and switch out classes depending on chosen GridSize But I was wondering if its possible to do this CSS only, as if it is, that'd be much more efficient Basically, eventually it'll need to somewhat have the same idea as my prototype, just.. More, bigger, customizeable https://brightdn.github.io/sv/ ^ See how square they are in link above and not an enormous white spat next to it? I can't recreate what I originally made... And one is w/ flexbox, the other w/ grid so I can't blindly take it over The prototype was created w/ only 1 gridsize in mind, namely 5x5, in the current iteration of it it needs multiple sizes and so obv the design has to adjust correctly to it, but I am failing to do so The javaScript I'll have to add will not be an issue, I can handle the js fine on my own, it's just css that's a weakpoint for me, as designing isn't my strong suit, so I never managed to find some love for css to really dig into it (Shoutout to one of the people here that gave me more insight of how array manipulation works btw, its extremily useful, way more efficient than what I did)

BrightDN

CodePen

Bingo

...

38 Replies

BrightieOP•17mo ago

My other prototype, also using grid is capable of keeping the grid good but the sizes are bad I copied the code, but its no use, I don't know what's causing it to be different Then again the grid adjusts to the outlines, the outlines don't adjust to the grid... which is not the desired outcome As then they can't be square and then the bingo looks weird as hell

Zakum•17mo ago

@.brightie if you want each bingo space to be square, but "not with a bunch of white space", do you mean you want to shrink the spaces? or you want to increase the size of the image + text?

BrightieOP•17mo ago

Well I don't know what's causing the white space on the right :p but its not supposed to be there I think for the 3x3 I'd like the tiles (so img and text) bigger I've tried just making them bigger before but the red black white background doesn't adjust along (its the parent element so I thought it would auto adjust if the child got bigger than the parent, but it didn't..) for for example a 4x4 Id want the squares to be a bit smaller I hope this makes sense

Zakum•17mo ago

so something like this?

Zakum•17mo ago

everything is centered in the space 🤔

BrightieOP•17mo ago

that's the white space I'm talking about xd The bingo is only 3x3, this enormous spat doesn't need to be there lol I think its bc the grid tries to fix its size to the parent? But I need it the other way around tbh bc as the gridsize changes, so should the height of the tiles including text and images

BrightieOP•17mo ago

the tiles on their own ill fiddle w after thats just bc the image is too small

Zakum•17mo ago

ohhh that space

BrightieOP•17mo ago

yess, my apologies for the confusing communication I should've send a picture of it from the start to avoid confusion

Zakum•17mo ago

like this then?

BrightieOP•17mo ago

yess exactly like that! But if the grid size were to get bigger In other words, 4x4, does it adjust correctly?

Zakum•17mo ago

ah I see the issue will need a few minutes then

BrightieOP•17mo ago

I'm so annoyed tho I've been fiddling w/ it for 15-30 mins You instantly come w/ the solution 😂

Zakum•17mo ago

doesn't quite shrink the space sizes down for 4x4, just adds another equally sized column so gonna try to get that desired effect

BrightieOP•17mo ago

well, what I could do for adjusting is basically created classes aka gridLarge, gridMedium etc etc Then do whatever solution you gave for this 3x3 And then toggle using javascript, being basically

const getGridSize() //I already have a code to grab the chosen gridSize

// Throw into a SwitchCase
// using object.classList.remove("className")
// object.classList.add("className")

const getGridSize() //I already have a code to grab the chosen gridSize

// Throw into a SwitchCase
// using object.classList.remove("className")
// object.classList.add("className")

but I was wondering if its possible to use css only for it As putting up a whole switch function for it (altho its better than using if if if if if if if) seems less efficient

Zakum•17mo ago

hows this?

BrightieOP•17mo ago

yes, that'd be perfect but I would probably have to throw them into a classToggler? Or are they automatically adjusted?

Zakum•17mo ago

all automatic & css only and you don't need width parameters, all you need is column count (and some logic to increase the number of pokemons/dom elements, otherwise you got a 4x4 with only 9 spaces filled lul)

BrightieOP•17mo ago

for real? Okay, now I'm actually fumingly annoyed 😂 I got lots to learn when it comes to css But I never really gotten into it as I am so bad w/ design that I never enjoyed using css, altho it is a vital part of website development oh I see, could you send the solution so that I can implement it into my css? oh dw, I already have the function to make the correct amount of elements for the bingotable

Zakum•17mo ago

sweet cant paste cause of character limits but its pretty simple: in the html, wrap bingoGrid in a new div called bingo-grid-wrapper

.bingo-grid-wrapper {
  width: 500px;
  background-color: #FFF;
  margin: auto;
}

.bingoGrid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    margin:20px auto;
}

.bingoTile{
    border: black solid 1px;
    aspect-ratio: 1/1;
    display: grid;
    justify-items: center;
    align-content: center;
}

/* and I just made the img into width: 50% */

.bingo-grid-wrapper {
  width: 500px;
  background-color: #FFF;
  margin: auto;
}

.bingoGrid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    margin:20px auto;
}

.bingoTile{
    border: black solid 1px;
    aspect-ratio: 1/1;
    display: grid;
    justify-items: center;
    align-content: center;
}

/* and I just made the img into width: 50% */

BrightieOP•17mo ago

tbh, I also haven't used grid very often, maybe that's why I couldn't think of the css to use But on my prototype it was adviced to use grid instead of flex and so I did I see, it is indeed very simple OH so aspect ratio is written like that, I thought it was like "1:1", that gave an error so I did 1, didn't give an error assumed it was correct lol Okay so, if I understand it correctly, I need to put another div around my bingoGrid div and have the new div be the wrapper I know I may sound stupid but, what is the reason for this being needed

Zakum•17mo ago

basically the issue was display: grid growing to take up full width of the parent, so it needed something to wrap it and determine its size, aka .bingo-grid-wrapper we can use aspect-ratio to make sure the tiles are always square regardless of the changing size, and make that a grid as well to easily center stuff finally the only thing that needs to change is the number in the repeat() function for column count! of course you can mess with .bingo-grid-wrapper's width, such as adding max-width: 100% or even one-liner it with width: min(500px, 100%) which will take the lower of the 2 values

Zakum•17mo ago

yep that's it in terms of markup

Zakum•17mo ago

for the first solution (not accounting for column count), i just added width: fit-content on .bingoGrid, however this makes it so adding another column will increase the width of the entire grid by 1 more column (450x450 -> 600x600) since its fitting content that has a fixed width (150x150 x 4). so if we take the reverse approach and define the width via the parent, we don't need fit-content

BrightieOP•17mo ago

well, I could probably change the number in repeat() using javascript Or simply remove the repeat from css and using javascript add it to the html element as document.element.setProperty("propertyName", "setPorperty" does that sound like a good solution or is it not really best practice I mean I know static placing css is usually bad practice but in this sense, it'll change depending on whats chosen and can change along without having to refresh the page

Zakum•17mo ago

are you using some sort of framework? or just vanilla js

BrightieOP•17mo ago

vanilla js

Zakum•17mo ago

I think the most efficient way to write it would be like

// add an id of bingoGrid to the div
const bingoGridElement = document.querySelector("#bingoGrid") 
bingoGridElement.setAttribute("style", `grid-template-columns: repeat(${columnCount}, 1fr)`)

// add an id of bingoGrid to the div
const bingoGridElement = document.querySelector("#bingoGrid") 
bingoGridElement.setAttribute("style", `grid-template-columns: repeat(${columnCount}, 1fr)`)

theres also setting the property directly like bingoGridElement.style.color = "red" but i dont know off the top of my head what itd be for grid template columns, maybe style.gridTemplateColumns? 😂

BrightieOP•17mo ago

isn't that sort of what I suggested just worked out? XD also, is there a difference between setAttribute and setProperty then? As when I used setProperty in the prototype, it did as it was supposed to This one was done using setProperty if I am not mistaken

Zakum•17mo ago

and use whatever method you like to determine columnCount, such as <select> <input type="radio/text/range/number"> oh yeah setProperty will be fine then havent written that kinda code in forever

BrightieOP•17mo ago

well, I already am reading the gridSize off of what I have in the dialog (when they click submit, the selected gridSize is chosen) the value of the gridSize.value is the amount of elements that have to be made but to get the columnCount I can just take teh square root of it, as that'll return the columnCount bc 3x3 = 9 sqrt of 9 = 3 is setProperty outdated maybe?

Zakum•17mo ago

don't think so, and it shouldn't be bad practice because its something you have to set dynamically, unless you're using forms and server rendering a new page with the requested grid size.. most people just use frameworks that abstract writing that code into quicker simpler forms

BrightieOP•17mo ago

yh, I am not writing php xd OH Speaking of serversided, do you have any idea if I could basically use github for server sided code? As these projects are well, for fun but I also kind of want to use them for portfolio to get a job as programmer But a part of this bingo I want to basically do PVP but I rather don't pay for a server If the github thing isn't possible I may have to revert to using database and read the database every 10 seconds but that can cause issues and also overload the database

Zakum•17mo ago

uh i dont do much backend stuff but if you mean github pages then no it's not possible, you will need some machine running somewhere to keep a service online that being said most things have a pretty generous free tier if you don't have thousands of users; for example Oracle Cloud Free Tier is always free if you don't go over quota reading database every 10 seconds sounds unoptimal, try to refactor so you only read when needed?

BrightieOP•17mo ago

I already have a bout 4 projects in mind, you have any idea if that'd be enough for a portfolio and a job as programmer? This bingo is one of them (it'll have more than just this, it'll also have a timed feature, so you're racing against the clock, if I somehow get it to work it'll have multiplayer, I think I also want the people to choose what color they want to use regardless of solo or pvp, gotta look into how to get an rgb/hex selector for that) Second project would be actually solving a real life issue at my current workplace (work in a store...Being able to quickly take note of expiry dates and all that is crucial on top of that general store managing and item location as a lot of coworkers including myself dont always know where everything is, so quickly grabbing phone, typing in articlename, boom found xd Third project would be several boardgames, but virtually, either against pc, programming that sounds like it could be fun, or against players 4th project, well, its making sidethings onto project 1, for example, yk wordle probably But then a pokemon edition Or a teambuilder, etc etc etc Lots of add ons, ofc all different pages but all w/ the same github repository well, that's the issue if I can't use serversided code, both instances of the website can't know if the other has filled something in Therefore I can't write a function to read the database based on that for example w/ lockout, its crucial the enemy knows they can't hunt for that thing on the bingo anymore But if I can't write it via server and am forced to use databases for it I'll have to be able to make the players aware of this Unless I somehwo find a way to put a listener..no I can't put a listener on a database oh, ill take a look into that oracle cloud thing I don't expect many users on this anyway, unless somehow a lot of pokemon game players want to do bingos and challenging someone to do a bingo race and somehow find their way to the website i made

Zakum•17mo ago

I think it could all be done in memory so you could just use a server without a database. maybe even cloudflare workers which has a generous free tier as well. unless you're trying to store win/loss history

Zakum•17mo ago

i would just follow this guys advice, decide if getting a job is more important or building things you like is more important https://www.youtube.com/watch?v=oC483DTjRXU

Coder Foundry

YouTube

The 1 Coding Project Idea Guaranteed To Get You A Software Developm...

Learn to build the bug tracker at https://learn.coderfoundry.com/ Bobby Davis explains what coding project to build, how to build it, and how to present it to an employer. - WHAT TO BUILD Use a design pattern like MVC, include an attractive UI, use a database, solve a business problem, and add user authentication - HOW TO BUILD Write an ...

BrightieOP•17mo ago

yeah, I didn't read your free server suggestion yet as I was writing my database solution and why it should have to read often Oh, don't get me wrong, I do want to get a job as programmer, but I am writing these websites bc I want to, I play pokemon games myself, some friends of mine do too And I feel like it could be something fun to do, some friendly competitions And the storemanager is technically also bc I want to do it, the store I work in is having losses due to bad practices of keeping the store managed correctly (A lot of expired products are found several months or maybe years expired already) and I want to fix that issue I like the challenge behind it, there'll be a whole lot of things I'll have to think of, its fun to challenge mself in that way I also want to make games, I got so many projects running through my head of things I want to make, webwise as well as gamewise xD if I can make a job out of what I enjoy doing, I see it as a win win Ill check that video out in a moment Alread tho, thanks for all the help I see, so according to that video A bugtracker would be the most suited application to write to get a job, almost gauranteed if the steps are followed Well, I am going to write it regardless, I can use that for other projects too, esp when I start on the games Keep track of those bugs will be a huge help Thanks!

Gaming

Programming

Grid issues