How can i declare something in the HTML, and it only show up when its called on a CSS grid.
This is my Pen --> https://codepen.io/Mike-was-here123/pen/zaVQER?editors=1100
Now i have two grids for two different screen sizes. Blue is the one for 1366 pixels in below (use the console to move the page) white is for above that (1367px+).
Blue: CSS line 84
White: CSS line 100
Now the wider screen white grid seems fine. If you look HTML line 14 - 26 you can see i have a div (Listing-1), inside of it i have a list of 11 h2's each with there signifying id. You can check in the CSS and see the each have their own grid-area's.
My thing is, on the blue grid i want to be able to hide listing-1 from the HTML and select the h2's inside and just display those however i please on the grid (there area tags).
Even if i can just select the h2’s inside, i still have the listing-1 div with the original h2’s inside. I’d just be copying it instead of selecting it.
How is this possible?
You can’t hide something from the HTML. You can chose to display it in a certain way or not using CSS. Such as putting display:none; on listing-1.
However if you hide listing-1 all your h2s will also not be shown.
You can define listing-1 as display:grid; which will make it the container for your grid-area’s
1 Like
But wait, then how do i hide the container and just get the h2’s?
So why do you want to hide the container exactly? If you hide it, anything in it will also be hidden, included the H2s
You can give it the same background color as the rest of the page to make it look like the rest of the page.
Well first, why isn’t my h2’s grid-area working?
Line 47 of my css i have two then one, yet on the HTML it appears in the id 1 then two for the h2’s?
Okay, so what do you want them to do? How many columns to you actually want. I see the h2s are in one column, the picture in another. The title and hr spanning two columns. What is the end state you are trying to get to?
So i want to wonder why the grid-area isn’t working for the h2’s. You can see i have it listed as two then one in the grid-areas, but it stays the way as shown in the HTML.
Basically the h2’s aren’t responding.
That was a bad picture:
Right now you’ve only defined one column for your h2s, and 11 rows. Sounds like you want two columns right?
Take a look at this code:
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"two three"
Your code was grid-template-column 1fr; That’s only one column. By adding another 1fr, it becomes two columns.
Now in your template areas spaces and carriage returns matter. You have:
“two”
“three”
but if you want them on the same line you need to do:
“two three”
Then they get filtered into your two columns.
Check the word template, you’ve got a misspelling there.
Another note, HTML is a hierarchical language, meaning the order you put things in matters. If you want 3 and 7 next to each other, it helps if they are one after each other in the HTML.
I’ll keep answering questions but I’d like to give you resource. When I am using a particular framework or method, I like to keep a reference up to remind me how things work. For CSS-Grid I find this page the most helpful.
I don’t want them to be on the same line, 1 x 11. I already did the CSS grid course.
The order i have them on the grid isn’t match my HTML.
So what do you want then? Your code is correct. for what is showing.
I want to know why my grid-area on listing-1 isn’t matching the listing-1 on the html.
Why is this?
@media (min-width: 1367px) {
.listing-1 {
display:grid;
margin-left: 10px;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-tempplate-areas:
"two"
"one"
"three"
"four"
"five"
"six"
"seven"
"eight"
"nine"
"ten"
"eleven";
grid-area: listing-1;
}
}
That is the Grid.
#2 {
grid-area: two;
}
that is a h2 on the grid.
<h2 id="2">Blue Lives Matter</h2>
This is what ‘two’ belongs too. This goes for every H2 in listing-1 .
Now if we go back to that grid area:
"two"
"one"
"three"
"four"
"five"
"six"
"seven"
"eight"
"nine"
"ten"
"eleven";
You can see that two or blue lives matter, should come before Make America Great Again on the html at listing-1 .
If we go onto the html and look at listing-1 and look at the first two:
Make America Great Again
Blue Lives Matter
You can see they are not reversed.
Oh okay. So here’s the thing. As I said before HTML is a hierarchical language. You need to order your HTML in the order you want it shown. CSS Grid CANNOT reorder it for you.
In short, your grid is not broken. You need to reorder your H2s in the order you want.
@media (max-width: 1366px) {
#1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11 {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
color: green;
font-size: 20px;
}
}
Then i tried this code to rotate the h2’s, this for some reason just doesn’t work, no css errors either.
I know what the issue is and I didn’t even think about it before.
Change #1 to #one and id=“1” to id=“one”
CSS does not like you start with numbers for the names of ids and classes.
