The CSS Grid Area Property Lets You Position Items Like an Absolute Sniper
HTML-код
- Опубликовано: 16 окт 2023
- I'm looking a little more disheveled than normal this week. Not sure what happened with my hat. Definitely gotta clean things up!
In any case, I'm finally covering the CSS grid-area property on this channel, which is a powerful shorthand property for putting items in precise positions with CSS Grid.
I encourage you to click the starter code pen below and follow along! This example layout is a really good introduction to using grid-area.
Starter Pen: codepen.io/geary-co/pen/OJrEmjb
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
Remember: CSS Grid Area lets you place items in a grid like, "boop! ... boop!" Never forget that.
So powerful and at the same time responsive. Love it!
Definitely the most important part. lol
🤣🤣
😂
It's important to note that when a row or column spans two units, it won't be exactly twice the size of a single unit. This is because spanning X units adds (X-1) times the gap to the row or column. While the checkered style grid offers precise placement control, and small gaps usually don't make a significant difference, larger gaps may require adjusting the fractional units (fr) of the grid container. For instance, in a three-column layout like 1fr-gap-1fr-gap-1fr, to make one column double the size of the others, instead of spanning two units and including the gap as (1fr-gap-1fr)-gap-1fr, you can adjust it to
2fr-gap-1fr. Your channel is great Kevin❤
Boop!.. Boop!.. Hooray! Awesome showcase of the Grid Area power. Thank you Kevin.
Awesome stuff, as usual. Thanks again, Kevin!
This one was fun. The most complicated part is figuring out how many rows and columns you need. I also found the formula
/* Row Start / Column Start / Row End / Column End */ confusing, so I wrote my code like this:
.symmetrical-grid > img:nth-child(1) {
/* Row Start / Column Start / Row End / Column End */
--row-start: 3;
--row-end: 5;
--column-start: 1;
--column-end: span 1;
grid-area: var(--row-start) / var(--column-start) / var(--row-end) / var(--column-end); /* Use slashes to specify grid-area */
}
I had to rearrange the order. lol. This made it so much easier to follow.
I like that approach 💪🏻
awesome like always, thanks for this in depth tutorial, so much value in it !
Very impressive, thank you Kevin 👍
Now I know I know what I don't know! Amazing, Kevin! More please!
Yet another perfectly executed tutorial. Thank you for all the effort you put in to these videos, Kevin.
Exactly what I was looking for! Great video, Thank you!
Amazing as always 😊
This was a great help. It's made me understand grids so much better. I'd just completed some overlapping grids for a job and I wish I had seen this video before.
Just fantastic Kevin. I always felt I didn't quite fully understand grid columns and rows and this tutorial has just blown that away. Thank you again for doing these, really do appreciate it 👊
Man this is GOLD Kevin. Thank you! I love that var(--display, flex) token.
Your videos have literally elevated my skills and knowledge! God bless you with an abundance of all that is good for you!
Abundance for you too, my friend!
Nice one again. Thank you.
excellent once again.
Wow! I don't you are great teacher or CSS grid is that powerful but I am mind blown 🤯 by this video. And I paid you with my comment 😅.
Good lesson
Oh my god, the coincidence! Was handed a design yesterday with many different "box" sizes and overlaps, both images and text, this might actually save my ass🥳
🎯
That was a good one!
Brillant!
Again, wow flabbergasted, the power of css...
Brilliant! I learned about this methodology in one of Cracka's videos, but you added some sweet nuggets of knowledge on top. Note: there's a typo in the video title, it should be "lets"', not "let's".
Another great tutorial Kevin. You keep churning out enlightening stuff. What's next? What?
Bricks interactions?
uuuuh - cool stuff, great!
Dude! with all these great videos where do I find time to do actual work??? hahaha. With all of your vids, you give specific do's and don't and deep deep learnings. much appreciated and a person grows their own skills by teaching...therefore you are the Master. 🙇
That's the downside of our industry. There's always something to learn! Who has time to work?
@@Gearyco and I started web design/dev so i didn't have to do math. lol! but this grid-area has a lot of great use cases for my client sites. will def set those sites apart visually from others and competitor.
don't get me wrong. I love the learnings you provide and the time commitment you take on. I considered your channel just like I do Netflix, Prime, Paramount+....watch the best content available. right now it's KGC.
I actually shut down once a while
"you don't know css, you're gonna stuck" perfect line for old myself who rely everything on page builder, when my page builder stuck then it's over 😂
Awesome. What abut the browser tools grid outline feature? I think it's in Chrome and FF now
Yes what about it?
Would be nice to have this as a Frame
It's coming.
Kevin, so for mobile, would this be close to what is needed?? Cranked it out in 10 mins as the NUMBERS mess me up.... and it's a bit sloppy, but works, eh?? probably a better way, but i wanted to take a stab at it.
basically, can't have all 9 images on a mobile screen so I was thinking use the center most columns for a 5 image grid.
@media (max-width: 768px) {
grid-template-columns: repeat(6,minmax(0,1fr));
}
.symmetrical-grid > img:nth-child(1) {
display: none;
}
.symmetrical-grid > img:nth-child(2) {
display: none;
}
.symmetrical-grid > img:nth-child(3) {
grid-area: 1 / 1 / 4 / span 2;
}
.symmetrical-grid > img:nth-child(4) {
grid-area: 4 / 1 / end / span 2;
}
.symmetrical-grid > img:nth-child(5) {
grid-area: 1 / 3 / end / span 3;
}
.symmetrical-grid> img:nth-child(6) {
grid-area: 1 / 6 / 5 / span 2;
}
.symmetrical-grid > img:nth-child(7) {
grid-area: 5 / 6 / end / span 2;
}
.symmetrical-grid > img:nth-child(8) {
display: none;
}
.symmetrical-grid > img:nth-child(9) {
display: none;
}
}
Not sure by just looking at the code. I don't make any changes on mobile ... I let every image stay where it is. This kind of layout is more for decoration and to break up content on the page, it's not designed to show every image in great detail.
sweet
I wish I could leave more than 1 like to this video 😅
boop, boop!
Very helpful. I've used this but not really understood it! out of interest, why repeat(8, minmax(0,1fr)) and not just repeat(8,1fr) if it's not a stupid question.
1fr can cause overflow in certain situations
Thank you@@Gearyco
Interesting, I thought you could used decimals in fr units. 1.5fr seems to work.
You can use decimals when creating a basic grid with fractional units, but you can't tell items to span a decimal value. Only whole numbers are accepted.
@@Gearyco got it. I guess that's why they don't include the FR since the spans are numbers and not flexible measurement units.
Great video, but I am just trying to rack my brains around the complexity of converting the layout for mobile. Are there tricks for achieving a good mobile layout? Or is it just knuckle down and do the math?
It's already mobile responsive if you don't want to change the layout (it won't overflow). Since this is a section divider used just for visual interest, there's no need to rearrange anything imo. In a layout where the content was important, you'd have to adjust the positions. In those cases it's super easy to just stack everything in two even columns on mobile, for example. You don't have to keep the positioning craziness going.
Nice, I was wondering the same thing.
Nice tutorial. Even it's responsive by default, I would use media queries to rearrange the positions for at least mobile views, when not tablet as well, as so tiny, nobody can see any image properly. Just makes no sense, right!?
You can still see the images. It’s mainly for decoration and to break up content on the page. But you are free to do whatever you want with media queries.
@@Gearyco Yes, I don't see this as a rule, more like an option to handle this type of layout on different devices.
You have such aggressive energy it's hilarious.
I watch at 2x and you sound like an irritated teacher who is mad that I just don't get it yet. No hate, just think it's funny.