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

Подписаться 18 тыс.

Просмотров 6 тыс.

50% 1

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/gea...
** 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...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **

Опубликовано:

16 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 64

@Gearyco 11 месяцев назад

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

@philippw.9206 11 месяцев назад

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

@PswACC 11 месяцев назад

Definitely the most important part. lol

@petrajovkov8622 10 месяцев назад

🤣🤣

@derekshort 10 месяцев назад

😂

@GeorgeMavrommatisgmattis 9 дней назад

Amazing. With Grid area there is no limitation to put any element anywhere. Thank you Kevin. Great tutorial as always!

@them00nitself 3 месяца назад

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❤

@PswACC 11 месяцев назад

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 11 месяцев назад

I like that approach 💪🏻

@ManolisGerakakis 5 месяцев назад

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

@nick90000 11 месяцев назад

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 11 месяцев назад

🎯

@Jmfwebdesign 11 месяцев назад

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

@Gojiyaravi 11 месяцев назад

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

@AbdulRahman-wj9fw 11 месяцев назад

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

@Gearyco 11 месяцев назад

Abundance for you too, my friend!

@evaniveson 8 месяцев назад

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

@LupusDesign 11 месяцев назад

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

@amanda4219 11 месяцев назад

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.

@chrisgreen5711 11 месяцев назад

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 👊

@fennek5351 11 месяцев назад

Nice one again. Thank you.

@manugronbach 5 месяцев назад

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

@unprofor10 7 месяцев назад

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

@mikkey0001 11 месяцев назад

excellent once again.

@KeshavDaBhutra 10 месяцев назад

Amazing as always 😊

@mr.matt.eastwood 11 месяцев назад

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

@stripedgoat8470 11 месяцев назад

Awesome stuff, as usual. Thanks again, Kevin!

@eucalyptech 10 месяцев назад

Very impressive, thank you Kevin 👍

@fiqihalfarizy4843 11 месяцев назад

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

@derekshort 10 месяцев назад

Good lesson

@dahunsi 11 месяцев назад

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

@Gearyco 11 месяцев назад

Bricks interactions?

@Louis-C-online 11 месяцев назад

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

@JeffTincher610Digital 11 месяцев назад

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 11 месяцев назад

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

@JeffTincher610Digital 11 месяцев назад

@@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 11 месяцев назад

I actually shut down once a while

@fabiamc 11 месяцев назад

Brillant!

@AdrianSalvaggio 11 месяцев назад

boop, boop!

@DesignwithCracka 11 месяцев назад

That was a good one!

@christophschumacher637 11 месяцев назад

uuuuh - cool stuff, great!

@thebigbadman04 11 месяцев назад

Would be nice to have this as a Frame

@Gearyco 11 месяцев назад

It's coming.

@LindaShum 2 месяца назад

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

@Gearyco 2 месяца назад

For sure

@alexisrabbitt4430 9 месяцев назад

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

@Gearyco 9 месяцев назад

Yes what about it?

@abdulwaheedorg 5 месяцев назад

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

@dithmarscherwebdesign 11 месяцев назад

sweet

@nicomorgan 7 месяцев назад

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 7 месяцев назад

1fr can cause overflow in certain situations

@nicomorgan 7 месяцев назад

Thank you@@Gearyco

@JeffTincher610Digital 11 месяцев назад

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 11 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

Nice, I was wondering the same thing.

@badcatdesign 11 месяцев назад

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

@Gearyco 11 месяцев назад

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 11 месяцев назад

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

@PicSta 11 месяцев назад

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 11 месяцев назад

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 11 месяцев назад

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

@vigilantezack 6 месяцев назад

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.