The CSS Grid Area Property Lets You Position Items Like an Absolute Sniper

Рет қаралды 5,536

8 ай бұрын

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

Пікірлер: 63

@Gearyco 8 ай бұрын

Remember: CSS Grid Area lets you place items in a grid like, "boop! ... boop!" Never forget that.

@philippw.9206 8 ай бұрын

So powerful and at the same time responsive. Love it!

@PswACC 8 ай бұрын

Definitely the most important part. lol

@petrajovkov8622 8 ай бұрын

🤣🤣

@derekshort 7 ай бұрын

😂

@them00nitself Ай бұрын

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❤

@manugronbach 3 ай бұрын

Exactly what I was looking for! Great video, Thank you!

@ManolisGerakakis 3 ай бұрын

Boop!.. Boop!.. Hooray! Awesome showcase of the Grid Area power. Thank you Kevin.

@PswACC 8 ай бұрын

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.

@Gearyco 8 ай бұрын

I like that approach 💪🏻

@Jmfwebdesign 8 ай бұрын

Yet another perfectly executed tutorial. Thank you for all the effort you put in to these videos, Kevin.

@stripedgoat8470 8 ай бұрын

Awesome stuff, as usual. Thanks again, Kevin!

@Gojiyaravi 8 ай бұрын

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

@KeshavDaBhutra 8 ай бұрын

Amazing as always 😊

@AbdulRahman-wj9fw 8 ай бұрын

Your videos have literally elevated my skills and knowledge! God bless you with an abundance of all that is good for you!

@Gearyco 8 ай бұрын

Abundance for you too, my friend!

@evaniveson 5 ай бұрын

Man this is GOLD Kevin. Thank you! I love that var(--display, flex) token.

@LupusDesign 8 ай бұрын

Now I know I know what I don't know! Amazing, Kevin! More please!

@chrisgreen5711 8 ай бұрын

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 👊

@nick90000 8 ай бұрын

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🥳

@Gearyco 8 ай бұрын

🎯

@amanda4219 8 ай бұрын

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.

@eucalyptech 8 ай бұрын

Very impressive, thank you Kevin 👍

@Louis-C-online 8 ай бұрын

awesome like always, thanks for this in depth tutorial, so much value in it !

@fennek5351 8 ай бұрын

Nice one again. Thank you.

@mikkey0001 8 ай бұрын

excellent once again.

@unprofor10 4 ай бұрын

Again, wow flabbergasted, the power of css...

@fabiamc 8 ай бұрын

Brillant!

@DesignwithCracka 8 ай бұрын

That was a good one!

@derekshort 7 ай бұрын

Good lesson

@mr.matt.eastwood 8 ай бұрын

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

@christophschumacher637 8 ай бұрын

uuuuh - cool stuff, great!

@fiqihalfarizy4843 8 ай бұрын

"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 😂

@dahunsi 8 ай бұрын

Another great tutorial Kevin. You keep churning out enlightening stuff. What's next? What?

@Gearyco 8 ай бұрын

Bricks interactions?

@JeffTincher610Digital 8 ай бұрын

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

@Gearyco 8 ай бұрын

That's the downside of our industry. There's always something to learn! Who has time to work?

@JeffTincher610Digital 8 ай бұрын

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

@dahunsi 8 ай бұрын

I actually shut down once a while

@dithmarscherwebdesign 8 ай бұрын

sweet

@AdrianSalvaggio 8 ай бұрын

boop, boop!

@thebigbadman04 8 ай бұрын

Would be nice to have this as a Frame

@Gearyco 8 ай бұрын

It's coming.

@LindaShum 2 күн бұрын

So helpful! Does this mean you can overlap items also?

@Gearyco 2 күн бұрын

For sure

@alexisrabbitt4430 7 ай бұрын

Awesome. What abut the browser tools grid outline feature? I think it's in Chrome and FF now

@Gearyco 7 ай бұрын

Yes what about it?

@abdulwaheedorg 3 ай бұрын

I wish I could leave more than 1 like to this video 😅

@nicomorgan 4 ай бұрын

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.

@Gearyco 4 ай бұрын

1fr can cause overflow in certain situations

@nicomorgan 4 ай бұрын

Thank you@@Gearyco

@badcatdesign 8 ай бұрын

Interesting, I thought you could used decimals in fr units. 1.5fr seems to work.

@Gearyco 8 ай бұрын

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.

@badcatdesign 8 ай бұрын

@@Gearyco got it. I guess that's why they don't include the FR since the spans are numbers and not flexible measurement units.

@JeffTincher610Digital 8 ай бұрын

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

@Gearyco 8 ай бұрын

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.

@tbarscott 8 ай бұрын

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?

@Gearyco 8 ай бұрын

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.

@mr.matt.eastwood 8 ай бұрын

Nice, I was wondering the same thing.

@PicSta 8 ай бұрын

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!?

@Gearyco 8 ай бұрын

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.

@PicSta 8 ай бұрын

@@Gearyco Yes, I don't see this as a rule, more like an option to handle this type of layout on different devices.

@vigilantezack 4 ай бұрын

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.