Grid-area, why is my header not spanning across both areas?
https://github.com/callum-laing/react-first-app
I think I've written the code where it needs to be, however could someone please take a look and see if you can find out where I'm missing?
the header is inside Heading.jsx, which has imported inside a <header> tag in app.jsx.
I've got display:grid in index.css (I think this is the right location for it?) and I've created 3 rows, 2 columns..
GitHub
GitHub - callum-laing/react-first-app
Contribute to callum-laing/react-first-app development by creating an account on GitHub.
163 Replies
Can you put it in a codepen?
I can try, Ive never put react code in a codepen 😄
Hm. nope, can't do it
well, i can, but i can't add multiple components
You can put it in a codesandbox, but it might just be easier to make a minimal reproduceable example
I mean effectively it's just
and
<Heading /> is
looks like you need to give .heading a grid-area maybe
yeah, you have all components in 1 div, and heading and main have some content, so they display in the first div, which is the first part of your "heading heading" area
it's done I just didn't paste it 😛
fixed?
nice
nah not fixedhaha
I just didn't paste the extra code
lol
this is the result if i stick a border on
so it's not picking up the 2nd heading in
@ἔρως
can you put this in a jsfiddle or codepoen?
grid-area: heading heading
but still, you have all the content in 1 div, so I think there will still be a problem
grid-area: heading only spans the first heading area
(grid gives me nightmares, so I could be wrong 100%)
.heading
has the grid-area: heading
property, but that grid area name is only used on the body
element. Since .heading
isn't a child of body
, it doesn't see that grid at all.
If I'm reading everything correctly, the resulting HTML is like this:
we need to see this in execution to property determine the exact cause
yeah i cant seem to post it anywhere as theres multiple js files
we're checking html and css, not javascript
you can grab the generated html, strip all scripts and you have the stuff you need
maybe some style trimming as well
ah
1 moment then
Run it, let it render, then copy the HTML and CSS out of the browser's dev tools.
yup, just yoink the html of the body tag
this? lol sorry this is new to me
yes, without the script and the <body>
you could format it a little, but it's small enough
now, the css
your css class
.heading
needs grid-area: heading
then, throw it into codepen
learned something new there
ah, there is an empty div
it has it already @MarkBoots :/
you have an html salad
the body has the grid
nothing will work
why so many divs
remove the div around the div around the h1
Welcome to React 😅
put the h1 in the body
think it is the <app> div
you can do
body > div { display: contents }
all i did was remove all the useless divs and the main
lmao
and then added
grid-area: heading
to h1I dont see all of those divs in vsc, that's an issue
that's it
coz of react doing react things
everything is rendering in the <main>
which means, you need to move the grid to the
<main>
it is the <app> component that creates the div.
so
body > div { display: contents }
I think you might be able to accomplish what you're trying to do without React breaking it if you use subgrid... I need to play with it for a minute.
or just remove the div
can you show the raw react code for that?
look here: you have a
<div>
change it to <>
then the closing change to </>
changed that, but it did nothing
it should
can you do the same for the new html?
talking about what you did here
codepen updated
move the grid to
#root
instead of body
😱
FINALLY.
did it work?
yeah it fixed it
if it did, im only getting started
your grid styles are below optimal
yeah it was a mixture of me being shit, and chatgpt being unhelpful
so its bad + bad
if you want more than 4 divs, it will bork
excuse my french, but ... wtf?
let the semantic elements begin 😉
why the hell did you ask chatgpt?
that's like asking a blind to pick between red and pink
😂
I sometimes post code in there to see what it spews out
in fairness it did have the grid in #root
garbage
but i moved it
🤦♂️
the grid has to be on the parent of what you want to style
thats' when I reset the css and started again
ah ok
ahh.. ok root makes sense
you though you could throw the grid somewhere and everything would magically work?
I just completely forgot about #root tbh
I had my parent/child positions all mixed up
it's fine, it's a really weird thing anyways
and you were overwritting it by using
<div>
there, instead of <>
yeah I get that now
I've made many notes 😄
can you update the css then?
because i still have a lot to talk about
updated
there is styling on the button it just wont work in codepen as it's.. react complications
nvm it added
lol
it's fine
your grid is still broken
because you still have a big mistake, which is the same we spoke before
you have the entire grid layout in
#root
but you have elements in main
that expect a grid
why it works? miracles, i guessI just added
grid-column: span 2
to div#root
and it looks like what you were going for. .header
isn't actually using the heading
grid area, though. It's just 100% of its parent's width;
this is what you have in the
#root
I think it's a react thing perhaps?
the main is containing a component
what you have here is bad, really bad
isnt that just a standard grid setup?
you still should use grid, but i suggest this:
then remove all
grid-area
I wouldn't add any styling to
#root
, isn't that kind of unconventional?no idea tbh @vince I'm very new to react
day 2 actually lmao
I think
#root
is just an element that React targets to inject html intothis works A LOT better
yes, it is
yeah in my dumb terms, all of the jsx pushes into that div id="root"
that's what react does, actually
forgot I had collab mode on codepen for some reason lol https://codepen.io/Laing91/collab/LYqZyya
you make a change, we all see the change 😁
Ok so here you're creating a grid, then creating a grid inside the grid.. gridception.
yeah, there's nothing wrong with that
also, you can just use
gap
instead of grid-gap
and gap
works for both grid and flexah yes
is it possible to add a border to the grid areas? its added them to the classes here, so the counter one is not the actual area size
didnt know if that was possible or not
it is the whole area
the "gap" isn't spacing: the gap is stuff that doesn't exist
it's not space: it's nothing
it's occupied by void
you can use outline
ah maybe im wrong then, i just meant because of this
I mean it doesn't matter, the plan is to build 4 little mini-apps and stick 1 in each corner lol
just something fun
if you use what i gave you, it will work
if you keep trying to fiddle with what you had before, it wont work
I did swap in your code above and it seemed to flip it upside down xD
define "it"
you skipped the last line
then remove all grid-areayou will see it works you forgot section2
what html did you have on your one?
the same
i didn't change it
but now, you did
you put a div with class section2 inside the div with class section2 inside the main
you don't need the section1
or the section2
one of them has to go
aight it looks better (the playground didnt center again but it works on my live one so I dunno)
you aren't centering the text
add the text center to the h1
ah there we go
awesome it works
aight now I can finally sleep 😂 I greatly appreciate your patience and help
you've been awesome
you're welcome
by the way
wtf is that .card?
you're overcomplicating the html again
<div class="section1">
<-- remove thisah so the card is the component in react
and add the border to it
the card has now the size of the area
this bad boy
oh sweet
how'd that happen
it happened because you removed the useless div i told you to
ahh ok
by the way, instead of using a ghastly red border, you can use a better background
the border is honestly just so I can see where the area goes, it's not to stay 😛
but yeah, I will add some cool backgrounds when I finish
background-color: rgba(0, 0, 0, 0.1);
this is less eye-hurting
and looks A LOT betterok that is much better, true
then you can throw a
border-radius: 7px
or something
and BAM! it looks better
you can also see the full areain this codepen, how would I add css for the other 3 areas?
just to get the full picture
you use the .card class
and everything happens like magic
seriously, add 3 of there:
<div class="card"></div>
oh wt
so it just creates a natural order -> ->
yes
very interesting..
I didn't know that
i guess if I want to place an item specifically I just move it's positioning in the html
no
but yes
you can do that
the challenge will be how to do that in react tbh
well, shouldn't be too hard
I'll make some more mini apps then look at it again, so ill keep this little chat open in case
I do have to sleep though 😮
sleep
but thanks again!
this was very very helpful
you're welcome
yw, all me
lol
but seriously, you tend to overcomplicate
remember the "kiss": keep it simple, stupid
that is the big issue for me, it's either overcomplicating it, or overthinking it
yes, it's a very huge issue
The way to stop overcomplicating html is to just use it more but idk how much time you wanna spend on it
i think the best is to remember that divs are containers, and you can re-use them
well, im learning react, and i want to build a lot to learn, as i cba reading all the time, so ill have to get better at it as I go for sure, lots of html/css/js
ill just have to remember, simplicity is key.
exactly
you also don't have to use
<div>
as a parent for everything
you can just have <>
Will start using that more
im not a react expert, but you should
This allows your heading to use the body's grid without changing any of your JSX or other CSS:
that's exactly what i call "overengineered"
it's so overcomplicated
why try to make it work with the existing html if the existing html is not that good to begin with?
im not saying he's bad: he just did the "mistakes" any beginner would do
and yes, you present a very valid solution
Challenges like this are fun for me. I wouldn't say it's the best way, but I got a chance to use subgrid and it does solve the original problem.
I wouldn't be qualified to judge what code is good or bad in any language.
Sidenote: I don't think the unidentified fragments (
<>...</>
) were always an option in React. I think every component required an enclosing element. So, there were a lot of unnecessary DIVs. It might still be like that in some tutorials. I'm not 100% certain, though.im not saying that it is good or bad
just saying that it is a bit too complicated for what's needed
still a very valid solutions
but using 2 grids is easier to understand than subgrids
and honestly, i just told him to use it because i've seen others to use it. and yeah, div spam is bad
i always saw it as a "phantom" element
it's there just to make the parser happy
Could just ignore #app div with display: contents; fyfi (future)
Very cool! I never heard of this one before. It looks like there are a couple of minor gotchas, but it would be very useful here.
It would be useful here, but there are three levels of elements between the one with the
grid-areas
and the one that wants to use them.
As @ἔρως pointed out, that HTML (JSX) could eliminate a couple of those extra elements and display: contents
(which I had to look up) could be used to ignore the necessary div#root
.you what now
i love to keep stuff simple, and that can have the unintended effect of complicating stuff a little bit
No 😂
You just don't like nice things
i actually used
display: contents
before
i just think it doesn't make sense to work around sub-optimal html when you can implement it in a much simplified way that works great - maybe even betterYou literally don't like nice things 😂
If any place is, the #app div is the place
Side note, I'd never use my body for my grid wrapper either though.
It's nice to just ignore the frameworks injected div though.
meanwhile, i used that div for the grid wrapper
instead of ignoring it and putting stuff in the body and then using the parent inside the div inside the framework injected div
it's nothing to do with "nice" things
You obviously don't use these frameworks cause that is even worse of a pattern
#depends but styling the injected div is typically going to be outside. Yes you can just slap the .wrapper class on it but then it lives in a very specific place. Not in the components.
Again you do you.. I'm just dropping my knowledge 😉
Its handy af imo
you know about it and don't like it does not mean its bad ffs
SvelteKit also does it by default cause they know ❤️
i didn't say it's bad, just "sub-optimal" or "not that great to being with"
Just saying....
Then whats your point Epic
that it is sub-optimal and not that great to begin with
I'm done mate... not worth my spoons
adds complexity for very little gain
just realized that all i have to do to add more apps to this is just add a new card eh.. so I could just build a page of apps lmao. I'm actually not sure how I'm going to do this with all these apps in 1 page, it could get very messy, but screw it, let's learn.
Any luck with the react course @CDL ?
eh.. not really. honestly I'm just looking at what concepts I need to learn, youtubing web dev simplified, checking out mdn, then trying to build stuff lol
my brain will not let me focus on a tutorial/reading documentation for more than like 15mins right now, so im just trying to build and study when i need to learn new things
If I can pull off this page I wnat to make though.. big brain.. big brain.
cool cool
christ i have to try and figure out how to implement this codepen into my react codebase now
well I somewhat have it.
nvm I have it. Just needed to give card a min-height: 100%
Meanwhile
my brain hates me
what in the hell
Yeah am going to do a case study on this architectural building project for my graduation
wait i just realised am in the wrong chat !
sorry 😅
hahahaha, no worries
.