Kevin Powell - Community•8mo ago

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

body {
  display: grid;
  grid-template-areas:
    "header header"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;

body {
  display: grid;
  grid-template-areas:
    "header header"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;

GitHub

GitHub - callum-laing/react-first-app

Contribute to callum-laing/react-first-app development by creating an account on GitHub.

163 Replies

vince•8mo ago

Can you put it in a codepen?

CDL•8mo ago

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

vince•8mo ago

You can put it in a codesandbox, but it might just be easier to make a minimal reproduceable example

CDL•8mo ago

I mean effectively it's just

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Heading />
      <main>
        <Counter count={count} setCount={setCount} />
      </main>
      <footer></footer>
    </div>
  );
}

export default App;

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Heading />
      <main>
        <Counter count={count} setCount={setCount} />
      </main>
      <footer></footer>
    </div>
  );
}

export default App;

and

body {
  display: grid;
  grid-template-areas:
    "heading heading"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  min-height: 100vh;
  background-color: grey;
}

body {
  display: grid;
  grid-template-areas:
    "heading heading"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  min-height: 100vh;
  background-color: grey;
}

<Heading /> is

export default function Heading() {
  return (
    <div className="heading">
      <header>
        <h1>Welcome to the playground!</h1>
      </header>
    </div>
  );
}

export default function Heading() {
  return (
    <div className="heading">
      <header>
        <h1>Welcome to the playground!</h1>
      </header>
    </div>
  );
}

missymae#2783•8mo ago

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

CDL•8mo ago

it's done I just didn't paste it 😛

missymae#2783•8mo ago

fixed? nice

CDL•8mo ago

nah not fixedhaha I just didn't paste the extra code

missymae#2783•8mo ago

lol

CDL•8mo ago

body {
  display: grid;
  grid-template-areas:
    "heading heading"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  min-height: 100vh;
  background-color: grey;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  /* Set the background color you prefer */
  padding: 1rem;
  text-align: center;
}

.heading {
  grid-area: heading;
}

.section1 {
  grid-area: section1;
}

.section2 {
  grid-area: section2;
}

.section3 {
  grid-area: section3;
}

.section4 {
  grid-area: section4;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

body {
  display: grid;
  grid-template-areas:
    "heading heading"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  min-height: 100vh;
  background-color: grey;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  /* Set the background color you prefer */
  padding: 1rem;
  text-align: center;
}

.heading {
  grid-area: heading;
}

.section1 {
  grid-area: section1;
}

.section2 {
  grid-area: section2;
}

.section3 {
  grid-area: section3;
}

.section4 {
  grid-area: section4;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

CDL•8mo ago

this is the result if i stick a border on

.heading {
  grid-area: heading;
  border: 1px solid red;
}

.heading {
  grid-area: heading;
  border: 1px solid red;
}

CDL•8mo ago

so it's not picking up the 2nd heading in

body {
  display: grid;
  grid-template-areas:
    "heading heading"
    "section1 section2"
    "section3 section4";

body {
  display: grid;
  grid-template-areas:
    "heading heading"
    "section1 section2"
    "section3 section4";

@ἔρως

ἔρως•8mo ago

can you put this in a jsfiddle or codepoen?

missymae#2783•8mo ago

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

VinceAggrippino•8mo ago

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

<body>
  <div id="root">
    <div>
      <div class="heading">
        <header>

<body>
  <div id="root">
    <div>
      <div class="heading">
        <header>

ἔρως•8mo ago

we need to see this in execution to property determine the exact cause

CDL•8mo ago

yeah i cant seem to post it anywhere as theres multiple js files

ἔρως•8mo ago

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

CDL•8mo ago

ah 1 moment then

VinceAggrippino•8mo ago

Run it, let it render, then copy the HTML and CSS out of the browser's dev tools.

ἔρως•8mo ago

yup, just yoink the html of the body tag

CDL•8mo ago

<div>
<div class="heading">
<h1>Welcome to the playground!</h1>
</div>
<main>
<div class="section1">
<div class="card">
<h2>Counter</h2>
<button>+</button>
<span><h2>Let's start!</h2></span>
</div>
</div>
</main>
<footer>
</footer>
</div>
</div>

<div>
<div class="heading">
<h1>Welcome to the playground!</h1>
</div>
<main>
<div class="section1">
<div class="card">
<h2>Counter</h2>
<button>+</button>
<span><h2>Let's start!</h2></span>
</div>
</div>
</main>
<footer>
</footer>
</div>
</div>

this? lol sorry this is new to me

ἔρως•8mo ago

yes, without the script and the <body> you could format it a little, but it's small enough now, the css

MarkBoots•8mo ago

your css class .heading needs grid-area: heading

ἔρως•8mo ago

then, throw it into codepen

CDL•8mo ago

https://codepen.io/Laing91/pen/LYqZyya

Callum

CodePen

LYqZyya

...

CDL•8mo ago

learned something new there

MarkBoots•8mo ago

ah, there is an empty div

CDL•8mo ago

it has it already @MarkBoots :/

ἔρως•8mo ago

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

VinceAggrippino•8mo ago

Welcome to React 😅

ἔρως•8mo ago

put the h1 in the body

MarkBoots•8mo ago

think it is the <app> div you can do body > div { display: contents }

ἔρως•8mo ago

all i did was remove all the useless divs and the main

CDL•8mo ago

lmao

ἔρως•8mo ago

and then added grid-area: heading to h1

CDL•8mo ago

I dont see all of those divs in vsc, that's an issue

ἔρως•8mo ago

that's it

CDL•8mo ago

coz of react doing react things

ἔρως•8mo ago

everything is rendering in the <main> which means, you need to move the grid to the <main>

MarkBoots•8mo ago

it is the <app> component that creates the div. so body > div { display: contents }

VinceAggrippino•8mo ago

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.

ἔρως•8mo ago

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

CDL•8mo ago

changed that, but it did nothing

ἔρως•8mo ago

it should can you do the same for the new html? talking about what you did here

CDL•8mo ago

  <div id="root">
<div class="heading">
<h1>Welcome to the playground!</h1>
</div>
<main>
<div class="section1">
<div class="card">
<h2>Counter</h2>
<button>+</button>
<span><h2>Let's start!</h2></span>
</div>
</div>
</main>
</div>

  <div id="root">
<div class="heading">
<h1>Welcome to the playground!</h1>
</div>
<main>
<div class="section1">
<div class="card">
<h2>Counter</h2>
<button>+</button>
<span><h2>Let's start!</h2></span>
</div>
</div>
</main>
</div>

codepen updated

ἔρως•8mo ago

move the grid to #root instead of body

CDL•8mo ago

😱 FINALLY.

ἔρως•8mo ago

did it work?

CDL•8mo ago

yeah it fixed it

ἔρως•8mo ago

if it did, im only getting started

CDL•8mo ago

ἔρως•8mo ago

your grid styles are below optimal

CDL•8mo ago

yeah it was a mixture of me being shit, and chatgpt being unhelpful so its bad + bad

ἔρως•8mo ago

if you want more than 4 divs, it will bork excuse my french, but ... wtf?

MarkBoots•8mo ago

let the semantic elements begin 😉

ἔρως•8mo ago

why the hell did you ask chatgpt? that's like asking a blind to pick between red and pink

CDL•8mo ago

😂 I sometimes post code in there to see what it spews out in fairness it did have the grid in #root

ἔρως•8mo ago

garbage

CDL•8mo ago

but i moved it

ἔρως•8mo ago

🤦‍♂️ the grid has to be on the parent of what you want to style

CDL•8mo ago

thats' when I reset the css and started again ah ok ahh.. ok root makes sense

ἔρως•8mo ago

you though you could throw the grid somewhere and everything would magically work?

CDL•8mo ago

I just completely forgot about #root tbh I had my parent/child positions all mixed up

ἔρως•8mo ago

it's fine, it's a really weird thing anyways and you were overwritting it by using <div> there, instead of <>

CDL•8mo ago

yeah I get that now I've made many notes 😄

ἔρως•8mo ago

can you update the css then? because i still have a lot to talk about

CDL•8mo ago

updated there is styling on the button it just wont work in codepen as it's.. react complications nvm it added lol

ἔρως•8mo ago

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 guess

VinceAggrippino•8mo ago

I 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;

ἔρως•8mo ago

#root {
    display: grid;
    grid-template-areas:
        "heading heading"
        "section1 section2"
        "section3 section4";
    grid-template-rows: 100px 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    min-height: 100vh;
    background-color: grey;
}

#root {
    display: grid;
    grid-template-areas:
        "heading heading"
        "section1 section2"
        "section3 section4";
    grid-template-rows: 100px 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    min-height: 100vh;
    background-color: grey;
}

this is what you have in the #root

CDL•8mo ago

I think it's a react thing perhaps?

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Heading />
      <main>
        <Counter count={count} setCount={setCount} />
      </main>
    </>
  );
}

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Heading />
      <main>
        <Counter count={count} setCount={setCount} />
      </main>
    </>
  );
}

the main is containing a component

import "./Counter.css";

export default function Counter({ count, setCount }) {
  return (
    <div className="section1">
      <div className="card">
        <h2>Counter</h2>
        <button onClick={() => setCount((count) => count + 1)}>+</button>
        {count === 0 ? (
          <span>
            <h2>Let's start!</h2>
          </span>
        ) : (
          <span>
            <h2>
              You clicked {count} time{count === 1 ? "" : "s"}
            </h2>
          </span>
        )}
        {count !== 0 && (
          <button onClick={() => setCount((count) => count - 1)}>-</button>
        )}
      </div>
    </div>
  );
}

import "./Counter.css";

export default function Counter({ count, setCount }) {
  return (
    <div className="section1">
      <div className="card">
        <h2>Counter</h2>
        <button onClick={() => setCount((count) => count + 1)}>+</button>
        {count === 0 ? (
          <span>
            <h2>Let's start!</h2>
          </span>
        ) : (
          <span>
            <h2>
              You clicked {count} time{count === 1 ? "" : "s"}
            </h2>
          </span>
        )}
        {count !== 0 && (
          <button onClick={() => setCount((count) => count - 1)}>-</button>
        )}
      </div>
    </div>
  );
}

ἔρως•8mo ago

what you have here is bad, really bad

CDL•8mo ago

isnt that just a standard grid setup?

ἔρως•8mo ago

you still should use grid, but i suggest this:

#root {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 10px;
    min-height: 100vh;
    background-color: grey;
}

main {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

#root {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 10px;
    min-height: 100vh;
    background-color: grey;
}

main {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

then remove all grid-area

vince•8mo ago

I wouldn't add any styling to #root, isn't that kind of unconventional?

CDL•8mo ago

no idea tbh @vince I'm very new to react day 2 actually lmao

vince•8mo ago

I think #root is just an element that React targets to inject html into

ἔρως•8mo ago

this works A LOT better

ἔρως•8mo ago

yes, it is

CDL•8mo ago

yeah in my dumb terms, all of the jsx pushes into that div id="root"

ἔρως•8mo ago

that's what react does, actually

CDL•8mo ago

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.

#root {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 10px;
    min-height: 100vh;
    background-color: grey;
}

main {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

#root {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 10px;
    min-height: 100vh;
    background-color: grey;
}

main {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

ἔρως•8mo ago

yeah, there's nothing wrong with that also, you can just use gap instead of grid-gap and gap works for both grid and flex

CDL•8mo ago

ah 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

ἔρως•8mo ago

it is the whole area

ἔρως•8mo ago

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

CDL•8mo ago

ah maybe im wrong then, i just meant because of this

CDL•8mo ago

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

ἔρως•8mo ago

if you use what i gave you, it will work if you keep trying to fiddle with what you had before, it wont work

CDL•8mo ago

I did swap in your code above and it seemed to flip it upside down xD

CDL•8mo ago

https://codepen.io/Laing91/collab/LYqZyya

Callum

CodePen

LYqZyya

...

ἔρως•8mo ago

define "it" you skipped the last line

then remove all grid-area

you will see it works you forgot section2

CDL•8mo ago

what html did you have on your one?

ἔρως•8mo ago

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

CDL•8mo ago

aight it looks better (the playground didnt center again but it works on my live one so I dunno)

ἔρως•8mo ago

you aren't centering the text add the text center to the h1

CDL•8mo ago

ah there we go awesome it works aight now I can finally sleep 😂 I greatly appreciate your patience and help you've been awesome

ἔρως•8mo ago

you're welcome by the way wtf is that .card? you're overcomplicating the html again <div class="section1"> <-- remove this

CDL•8mo ago

ah so the card is the component in react

ἔρως•8mo ago

and add the border to it the card has now the size of the area

CDL•8mo ago

this bad boy

import "./Counter.css";

export default function Counter({ count, setCount }) {
  return (
    <div className="section1">
      <div className="card">
        <h2>Counter</h2>
        <button onClick={() => setCount((count) => count + 1)}>+</button>
        {count === 0 ? (
          <span>
            <h2>Let's start!</h2>
          </span>
        ) : (
          <span>
            <h2>
              You clicked {count} time{count === 1 ? "" : "s"}
            </h2>
          </span>
        )}
        {count !== 0 && (
          <button onClick={() => setCount((count) => count - 1)}>-</button>
        )}
      </div>
    </div>
  );
}

import "./Counter.css";

export default function Counter({ count, setCount }) {
  return (
    <div className="section1">
      <div className="card">
        <h2>Counter</h2>
        <button onClick={() => setCount((count) => count + 1)}>+</button>
        {count === 0 ? (
          <span>
            <h2>Let's start!</h2>
          </span>
        ) : (
          <span>
            <h2>
              You clicked {count} time{count === 1 ? "" : "s"}
            </h2>
          </span>
        )}
        {count !== 0 && (
          <button onClick={() => setCount((count) => count - 1)}>-</button>
        )}
      </div>
    </div>
  );
}

oh sweet how'd that happen

ἔρως•8mo ago

it happened because you removed the useless div i told you to

CDL•8mo ago

ahh ok

ἔρως•8mo ago

by the way, instead of using a ghastly red border, you can use a better background

CDL•8mo ago

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

ἔρως•8mo ago

background-color: rgba(0, 0, 0, 0.1); this is less eye-hurting and looks A LOT better

CDL•8mo ago

ok that is much better, true

ἔρως•8mo ago

then you can throw a border-radius: 7px or something and BAM! it looks better you can also see the full area

CDL•8mo ago

in this codepen, how would I add css for the other 3 areas? just to get the full picture

ἔρως•8mo ago

you use the .card class and everything happens like magic seriously, add 3 of there: <div class="card"></div>

CDL•8mo ago

oh wt so it just creates a natural order -> ->

ἔρως•8mo ago

yes

CDL•8mo ago

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

ἔρως•8mo ago

no but yes you can do that

CDL•8mo ago

the challenge will be how to do that in react tbh

ἔρως•8mo ago

well, shouldn't be too hard

CDL•8mo ago

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 😮

ἔρως•8mo ago

sleep

CDL•8mo ago

but thanks again! this was very very helpful

ἔρως•8mo ago

you're welcome

vince•8mo ago

yw, all me

ἔρως•8mo ago

lol but seriously, you tend to overcomplicate remember the "kiss": keep it simple, stupid

CDL•8mo ago

that is the big issue for me, it's either overcomplicating it, or overthinking it

ἔρως•8mo ago

yes, it's a very huge issue

vince•8mo ago

The way to stop overcomplicating html is to just use it more but idk how much time you wanna spend on it

ἔρως•8mo ago

i think the best is to remember that divs are containers, and you can re-use them

CDL•8mo ago

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.

ἔρως•8mo ago

exactly you also don't have to use <div> as a parent for everything you can just have <>

CDL•8mo ago

Will start using that more

ἔρως•8mo ago

im not a react expert, but you should

VinceAggrippino•8mo ago

This allows your heading to use the body's grid without changing any of your JSX or other CSS:

/* Use the body's grid all the way down to the heading element */
#root, #root div:has(> .heading) {
    /* Make this element take up the entirety of its parent's grid */
    grid-column: 1 / -1;
    grid-row: 1 / -1;

    /* Use the parent's grid to layout this element's children */
    display: grid;
    grid-template: subgrid / subgrid;
}

#root div:has(> .heading) .heading {
    grid-area: heading;
}

/* Use the body's grid all the way down to the heading element */
#root, #root div:has(> .heading) {
    /* Make this element take up the entirety of its parent's grid */
    grid-column: 1 / -1;
    grid-row: 1 / -1;

    /* Use the parent's grid to layout this element's children */
    display: grid;
    grid-template: subgrid / subgrid;
}

#root div:has(> .heading) .heading {
    grid-area: heading;
}

ἔρως•8mo ago

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

VinceAggrippino•8mo ago

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.

ἔρως•8mo ago

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

b1mind•8mo ago

Could just ignore #app div with display: contents; fyfi (future)

VinceAggrippino•8mo ago

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.

CDL•8mo ago

you what now

ἔρως•8mo ago

i love to keep stuff simple, and that can have the unintended effect of complicating stuff a little bit

b1mind•8mo ago

No 😂 You just don't like nice things

ἔρως•8mo ago

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 better

b1mind•8mo ago

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

ἔρως•8mo ago

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

b1mind•8mo ago

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 ❤️

ἔρως•8mo ago

i didn't say it's bad, just "sub-optimal" or "not that great to being with"

b1mind•8mo ago

Just saying.... Then whats your point Epic

ἔρως•8mo ago

that it is sub-optimal and not that great to begin with

b1mind•8mo ago

I'm done mate... not worth my spoons

ἔρως•8mo ago

adds complexity for very little gain

CDL•8mo ago

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.

Amine•8mo ago

Any luck with the react course @CDL ?

CDL•8mo ago

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.

Amine•8mo ago

cool cool

CDL•8mo ago

christ i have to try and figure out how to implement this codepen into my react codebase now well I somewhat have it.

CDL•8mo ago

nvm I have it. Just needed to give card a min-height: 100%

Amine•8mo ago

Meanwhile

Amine•8mo ago

my brain hates me

CDL•8mo ago

what in the hell

Amine•8mo ago

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 😅

CDL•8mo ago

hahahaha, no worries

Amine•8mo ago

Gaming

Programming

Grid-area, why is my header not spanning across both areas?