Help! I don't know how to do the grid-templates-areas.
git hub
https://github.com/Vali3232/four-card-feature-section-master
live site
https://vali3232.github.io/four-card-feature-section-master/.
I tried chat gpt fot the grid area, youtube, i can't get it to work.
GitHub
GitHub - Vali3232/four-card-feature-section-master
Contribute to Vali3232/four-card-feature-section-master development by creating an account on GitHub.
49 Replies
what are you trying to achieve?
I want the grid to be something like this if it makes sense -=-
But I don't know how
I know that there is the YouTube video on this exact design but i wanted to see how far can i go before i start watching Kevin's video.
well, you don't need grid areas for this
You don't need grid area, but you can use them if you want
you can do this way:
if it doesn't work, just add
grid-template-rows: auto auto or 1fr 1fr
then you just have to do the centering stuffthat might be closer to what's wanted
no, that will have the same effect as this:
wait, it's a bit different, actually
i tried all of them and it doesn't work
it should look like this
that's how it looks now, before it was all in the down right corner so now is better but don't know how to make this shape
grid-template-area defines the areas, but you still need to assign the elements in the grid
Something like MDN Web Docs
grid-area - CSS | MDN
The grid-area CSS shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
they do in style attributes
you can't use the same name for separated areas. The
. area is the only exception afaik. So like Ragnar suggested, you HAVE to use this:
all examples have to work if done correctly
you can't call them
empty
also, I would heavily recommend learning to use the DOM inspector. The way I found this is by examining the element in the DOM inspector, and it showed that the grid-template-areas property value was invalid.
From MDN (emphasis mine):
A row is created for every separate string listed, and a column is created for each cell in the string. Multiple cell tokens with the same name within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid. All the remaining unnamed areas in a grid can be referred using null cell tokens. A null cell token is a sequence of one or more . (U+002E FULL STOP) characters, e.g., ., ..., or ..... etc. A null cell token can be used to create empty spaces in the grid.
.cards{
display: grid;
grid-template-areas:
". card2 ."
"card1 card2 card4"
"card1 card3 card4"
". card3 .";
}
i dont know how you made the box for the code
you have to give the areas to the children
each has to have
grid-area: card1
or card2 ....thats how i named my children
actually it's perfect now
they do, just in a style tag
oh
ew
not my personal prefered method, but it works
especially cause there's already a class for each card
yeah, i wouldn't do this way either
exactly
chat gpt told me to do it like that:))
that's a great reason to not do it that way tbh, LLMs are terrible at CSS
that's horrible, not gonna lie
I might set a variable in the style tag, and then reference that variable in a
.cards > article selector
If you're still learning, avoid ChatGPT like the plague, especially for generating codei only do that on a
style attribute or tag if i have to change it with jshow whould it be done in css? setting the grid areas
you're just going to poison your brain with hallucinations, and when the bubble bursts those free tiers are going to evaporate like water in the desert
just set the grid-area in the .card1 selectors you already have!
just add each
grid-area to each class
in the css filei'm trying to learn html and css for 3 monts and usually i write all the code myself, when i get stuck i ask the ai
no
don't do that
please
just, please, learn to code... forget the vibe coding until you know enough to tell if ChatGPT is lying or not, and if you get stuck, ask here or on a thousand other servers
you will learn it all wrong, or not at all
you will just use the ai to learn it for you
instead of you knowing what to do
knowing how to "unstuck" yourself is a very important skill you MUST learn
ai is just not how you do it
specially since it ACTIVELY LIES TO YOU
but not only it lies, it tries to convince you that you're wrong
or just agrees you're right and writes the most halucinated halucination to ever been halucinated
i had a couple of courses on udemy to begin with, after them and exercizing a bit i hit youtube tutorials and more exercizing
how about less tutorials?
i'm trying to do this with manny forntend mentor projects
good, as you should
to test yourself accurately
That is the goal
i don't know if i should try doing the java script courses on udemy, or i should sit more on html/css for now
focus on css and html first
you're not ready yet
okay
give it a month or 2, and you will be better prepared
Trying this, but i have a full time job so depends how much time do i allocate every evening for learning:)
also, make use of the #showcase channel to show your completed projects and ask for feedback
Okay, thank you, i'm gonna try and finish this now.
you're welcome