Kevin Powell - Community•14mo 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•14mo ago

Can you put it in a codepen?

CDLOP•14mo 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•14mo ago

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

CDLOP•14mo 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•14mo 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

CDLOP•14mo ago

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

missymae•14mo ago

fixed? nice

CDLOP•14mo ago

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

missymae•14mo ago

lol

CDLOP•14mo 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;
}

CDLOP•14mo 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;
}

CDLOP•14mo 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";

@ἔρως

ἔρως•14mo ago

can you put this in a jsfiddle or codepoen?

missymae•14mo 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•14mo 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>

ἔρως•14mo ago

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

CDLOP•14mo ago

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

ἔρως•14mo 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

CDLOP•14mo ago

ah 1 moment then

VinceAggrippino•14mo ago

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

ἔρως•14mo ago

yup, just yoink the html of the body tag

CDLOP•14mo 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

ἔρως•14mo ago

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

MarkBoots•14mo ago

your css class .heading needs grid-area: heading

ἔρως•14mo ago

then, throw it into codepen

CDLOP•14mo ago

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

Callum

CodePen

LYqZyya

...

CDLOP•14mo ago

learned something new there

MarkBoots•14mo ago

ah, there is an empty div

CDLOP•14mo ago

it has it already @MarkBoots :/

ἔρως•14mo 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•14mo ago

Welcome to React 😅

ἔρως•14mo ago

put the h1 in the body

MarkBoots•14mo ago

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

ἔρως•14mo ago

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

CDLOP•14mo ago

lmao

ἔρως•14mo ago

and then added grid-area: heading to h1

CDLOP•14mo ago

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

ἔρως•14mo ago

that's it

CDLOP•14mo ago

coz of react doing react things

ἔρως•14mo ago

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

MarkBoots•14mo ago

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

VinceAggrippino•14mo 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.

ἔρως•14mo 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 </>

CDLOP•14mo ago

changed that, but it did nothing

ἔρως•14mo ago

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

CDLOP•14mo 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

ἔρως•14mo ago

move the grid to #root instead of body

CDLOP•14mo ago

😱 FINALLY.

ἔρως•14mo ago

did it work?

CDLOP•14mo ago

yeah it fixed it

ἔρως•14mo ago

if it did, im only getting started

CDLOP•14mo ago

ἔρως•14mo ago

your grid styles are below optimal

CDLOP•14mo ago

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

ἔρως•14mo ago

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

MarkBoots•14mo ago

let the semantic elements begin 😉

ἔρως•14mo ago

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

CDLOP•14mo ago

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

ἔρως•14mo ago

garbage

CDLOP•14mo ago

but i moved it

ἔρως•14mo ago

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

CDLOP•14mo ago

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

ἔρως•14mo ago

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

CDLOP•14mo ago

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

ἔρως•14mo ago

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

CDLOP•14mo ago

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

ἔρως•14mo ago

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

CDLOP•14mo ago

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

ἔρως•14mo 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•14mo 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;

ἔρως•14mo 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

CDLOP•14mo 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>
  );
}

ἔρως•14mo ago

what you have here is bad, really bad

CDLOP•14mo ago

isnt that just a standard grid setup?

ἔρως•14mo 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•14mo ago

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

CDLOP•14mo ago

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

vince•14mo ago

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

ἔρως•14mo ago

this works A LOT better

ἔρως•14mo ago

yes, it is

CDLOP•14mo ago

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

ἔρως•14mo ago

that's what react does, actually

CDLOP•14mo 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;
}

ἔρως•14mo 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

CDLOP•14mo 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

ἔρως•14mo ago

it is the whole area

ἔρως•14mo 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

CDLOP•14mo ago

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

CDLOP•14mo 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

ἔρως•14mo 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

CDLOP•14mo ago

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

CDLOP•14mo ago

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

Callum

CodePen

LYqZyya

...

ἔρως•14mo ago

define "it" you skipped the last line

then remove all grid-area

you will see it works you forgot section2

CDLOP•14mo ago

what html did you have on your one?

ἔρως•14mo 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

CDLOP•14mo ago

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

ἔρως•14mo ago

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

CDLOP•14mo 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

ἔρως•14mo ago

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

CDLOP•14mo ago

ah so the card is the component in react

ἔρως•14mo ago

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

CDLOP•14mo 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

ἔρως•14mo ago

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

CDLOP•14mo ago

ahh ok

ἔρως•14mo ago

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

CDLOP•14mo 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

ἔρως•14mo ago

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

CDLOP•14mo ago

ok that is much better, true

ἔρως•14mo ago

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

CDLOP•14mo ago

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

ἔρως•14mo ago

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

CDLOP•14mo ago

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

ἔρως•14mo ago

yes

CDLOP•14mo 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

ἔρως•14mo ago

no but yes you can do that

CDLOP•14mo ago

the challenge will be how to do that in react tbh

ἔρως•14mo ago

well, shouldn't be too hard

CDLOP•14mo 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 😮

ἔρως•14mo ago

sleep

CDLOP•14mo ago

but thanks again! this was very very helpful

ἔρως•14mo ago

you're welcome

vince•14mo ago

yw, all me

ἔρως•14mo ago

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

CDLOP•14mo ago

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

ἔρως•14mo ago

yes, it's a very huge issue

vince•14mo ago

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

ἔρως•14mo ago

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

CDLOP•14mo 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.

ἔρως•14mo ago

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

CDLOP•14mo ago

Will start using that more

ἔρως•14mo ago

im not a react expert, but you should

VinceAggrippino•14mo 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;
}

ἔρως•14mo 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•14mo 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.

ἔρως•14mo 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•14mo ago

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

VinceAggrippino•14mo 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.

CDLOP•14mo ago

you what now

ἔρως•14mo ago

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

b1mind•14mo ago

No 😂 You just don't like nice things

ἔρως•14mo 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•14mo 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.

ἔρως•14mo 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•14mo 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 ❤️

ἔρως•14mo ago

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

b1mind•14mo ago

Just saying.... Then whats your point Epic

ἔρως•14mo ago

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

b1mind•14mo ago

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

ἔρως•14mo ago

adds complexity for very little gain

CDLOP•14mo 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•14mo ago

Any luck with the react course @CDL ?

CDLOP•14mo 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•14mo ago

cool cool

CDLOP•14mo ago

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

CDLOP•14mo ago

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

Amine•14mo ago

Meanwhile

Amine•14mo ago

my brain hates me

CDLOP•14mo ago

what in the hell

Amine•14mo 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 😅

CDLOP•14mo ago

hahahaha, no worries

Amine•14mo ago

Gaming

Programming

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