PB101: L09 - Creating Common Page Layouts With CSS Grid

[@Gearyco]

Let me know if the pace of the page building is okay in this training! Do you want me to go slower? Faster? Things are just fine as they are?

[@derekshort]

It's good so far.

[@tomiastudio]

Pace was perfect. Another great lesson. Thank you!

[@VijayKumarIM]

The current phase it good and doesnt feel too long. Also if possible can you give us a starting template of those tokens to use them as templates? thank you

[@Gearyco]

@@VijayKumarIM Automatic.css --- the tokens we've created so far are just the tip of the iceberg. There's no copy/paste ... you're in framework territory.

[@Rollclick]

It's great! even though the training material is fast; how you present it make it understandable and easy.

[@derekshort]

​New merchandise slogan! "When in doubt, BEM it out."

[@jpk6916]

Kevin, thanks a load...you add an insane amount of value to the css community.

[@jnslzr]

1:09:48 "... speed is important, but speed comes from experience and practice..." could not agree more = ) thank you!

[@GavinDavidson]

Not only have I finally grasped CSS grid, but now every time I develop, I can tell when I’m cutting corners. My inner voice nags: “No, no-taking shortcuts like this is lazy, and it’ll come back to haunt you later!” Thank you for explaining this clearly. Next up: Flexbox.

[@kevinvangeffen1082]

Amazing course. Pretty sure it's THE best web design course I have ever taken in my life. And we are only half way! Even though 95% isn't new information to me, it does help a lot to achieve a better and more scalable workflow. You have a very clear and entertaining way of teaching. Keep up the amazing work! Can't wait for the rest of it.

[@Gearyco]

💪🏻💪🏻

[@benjaminkriener6666]

Thank you so much for this free course, Kevin! I started three years ago with Elementor and basic knowledge in web design, and I always had the feeling that this isn't the right way to do it. 😅 I finally switched to Bricks, and your content is incredibly helpful for me 🖤

[@DesignwithCracka]

09:23 "this is not fat shaming... don't try to cancel me" LOL! Great lessons btw!

[@jcdeaton42]

I've been putting off watching this series because I thought I would be too advanced for it. I was wrong. You've shown me things I've been doing wrong for 20 years (lol). Thanks for the content.

[@Gearyco]

Thanks for giving it a shot!

[@GeorgeMavrommatisgmattis]

Thank you Kevin, great video, great methodology in web design/CSS design. Having dealt with the limitations of older CSS versions, where positioning elements required a lot of workarounds like floats, clearfix hacks, and absolute positioning, it's much easier to appreciate the elegance and efficiency of modern layout models like CSS Grid and Flexbox. Thank you for teaching us the right way. The details make the difference. We love Kevin's lessons!

[@ElementoryMyDearWatson]

Just when I think I know what I'm doing I watch one of your videos and realize I'm not! Once again many thanks Keving for a bounty of great information and training.

[@wordpressjunkie8830]

I'm glad to inform you that I checked myself out of Chumpville, I ain't even going to watch content from other chump villagers anymore.

[@ZachariahWiedeman]

I'm not sure when this liberating thought occurred to me, but I'm never going to have to buy a WordPress theme ever again. Amazing! 🤑

[@EricThomson]

This course is frigin awesome! Up till now, its been a review for me but now all the pieces are coming together. I love Bev by the way. I hate painting myself into a corner.

[@davidwalls2304]

Great lesson once again. Practice/homework will come after watching again and taking notes. Damn this is a great 101 course!

[@hassanfarhood8489]

Kevin, you are one master teacher! Excellent tutorial, very rich, useful, & practical. Teaching must be your life calling cause you are enjoying it so much. Bravo!

[@Gearyco]

I do enjoy teaching :) Also helps me get better.

[@jamorahcito]

@@Gearyco you don't know anything about anything until you have taught someone how to do something. quote on a poster in my teacher's office in high school.

[@fredchams1052]

CSS grid was quite obscure to me since the arrival of Flexbox. I wasn't using Grid because I didn't understand how it worked, or at least it was pretty fuzzy. Thanks for clearing this up! As usual, you are a great teacher, with your own recognizable style.

[@Gearyco]

Flexbox was here long before Grid FYI.

[@fredchams1052]

​@@Gearyco Yes, I know. What I meant was that I used Flexbox a lot, mostly. When Grid came along, I didn't dive in because I felt it was more complex than Flex. (sorry, English is not my first language).

[@johnramos7761]

Just love your passion, you must be the one who calls the other idiot and explain him why, keep the good work! Peace from Portugal!

[@ReubenHochstetler]

I finally understand the basics of CSS Grid 😊. It should not have taken me this long 😅. Now I’m confident writing it without double-checking a resource page. Great lesson, Kevin!

[@hosseinkhanmohammadi4770]

Thank you Kevin. It's really helpful and I'm waiting for more advanced and level by level tutorials from you. 🍀

[@LupusDesign]

Another excellent lesson, Kevin. Your pace is fine, for me. I can stop and replay, when necessary.

[@JörginBerlin]

to all those who want to know how to do it the right way: watch this brilliant training tutorials.

[@pushkardamle4112]

This is right on money and so much fun! Moden web page building training with best practices! The course is getting tactical now and this is where "rubber meets the road"!

[@jybevox]

So much best practices are packed within these videos. Thank you so much :)

[@philippepperell9951]

Another great tutorial, Kevin, and the pace is perfect for me.

[@vaughanprint]

Kevin, I spent all day trying to get this right 😢… it was a real bemmer! 😆

[@thebizpixie]

Done, that was really helpful. I'm learning heaps about both Bricks and how to group/name my content in CSS. Thank you.

[@markpeters9382]

And that is how Bev calling us is no longer a problem!

[@gojiyaravi2]

Wow, It will take 2 to 4 hours to design that page for some people. Really loving this course ☺️. I was confused why Grid is better than Flexbox and now I totally get it 😅. Thanks Kevin 🤗!

[@BeneathTheBark]

Great lesson Kevin, great pace it’s starting to sink in and come together thank you.

[@ninacreatesonline]

I loved this and felt a sense of accomplishment after working through this. BTW to anyone without WPcodebox, I just used the style sheet. I love your analogy of touching all the bases and can see how all these best practices are going to help. I know I can only get quicker at them :) Thanks for the great lesson.

[@Gearyco]

💪🏻💪🏻💪🏻

[@VascoDanielBaiao]

I literally did the pat on the back Was in need for that. Thank you for the reminder 👌

[@derekshort]

Auto-alternating content code snippet for you to type yourself and, therefore, learn faster: .talking-points-wrapper > *:nth-child(even) > *:last-of-type { order: -1 }

[@Gearyco]

I don't advocate for copy/paste. Make people type it so they learn faster.

[@derekshort]

@@Gearyco Good point. I just edited my comment.

[@JaysonRivest]

Loving all the great info you're providing in this series. Great presentation and really fantastic job of breaking down the topics. So glad that I found your channel and Automatic.css! I"m not a pro webdesigner, but create/maintain my organizations website and feel so much more confident because of your content!

[@Gearyco]

Much appreciated!

[@stephanegernez4621]

Thank you Kevin for these very instructive videos, it's really a great job!

[@alexisrabbitt4430]

Flexbox and grid work great together. Best way I've heard it put on knowing when to use which is by Kevin Powell (and I paraphrase): use grid when you want the parent to dictate the layout, use flexbox when you want the content (of the children) to dictate the layout

[@rickdugmore]

Marvelous

[@coldfever94]

Thank you for your lessons, really helpful, your videos rewired how my brain works 😂😂

[@davidnickson5043]

Never knew I was a hard criminal until watching these videos 😂

[@Gearyco]

Get off the streets!

[@bogdan3453]

As a beginner in web developing I would be interested in a second part of this episode so to speak as I am a little bit confused on which is better: flex or grid for sections, containers. If I understood correctly from this lesson it is a best practice to use grid on sections but after inspecting the DOM of AutomaticCSS website I am noticing each section being set to flex, including the whole "body".

[@Gearyco]

Grid and flex can be used anywhere depending on what you need to do. Did you watch the lesson on flexbox yet?

[@bogdan3453]

@@Gearyco yes! So flex gives flexibility over grid on aligning items within sections or containers?

[@MarkWilliams77]

Never thought I'd say this: actually looking forward to when Bev calls now 😎

[@tjveach]

Kevin, when you get a chance, can you tell me what tool /chrome extension you are using that allowed you to annotate the web page? THKS

[@Gearyco]

Presentify

[@tjveach]

@@Gearyco thanks Kevin just got it

[@j.h.fehlis]

I guess, this is part of his screen recording app. Maybe CleanShot X.

[@eucalyptech]

Very helpful, thank you Kevin !

[@stevewilkison]

So, as you say, since grid is more versatile than flex, and used more often, why does Bricks set sections and containers to be flex by default. We have to change them to grid. Wouldn't it make more sense to set them to grid and then change them to flex when needed? Would you be in favor of Bricks changing the default setting for sections and containers to grid?

[@Gearyco]

No bricks is correct because the content the user will put in any box is unknown. Flex is a better option as a default.

[@stevewilkison]

@@Gearyco OK, thanks!

[@joshpaynedesigns]

@@Gearyco This is the reason I never used Grid because when is the content or amount of columns ever truly known in a website build? Flex doesn't need to know this but Grid does?

[@koperkuba]

Thanks for another lesson. Keep it up!

[@fatcatdesign]

#Q : Starting at time stamp 30:00 In the hero container where we have the heading, text, button; and then the Messagely image.... If I follow this lesson, using tokens as classes, the container doesn't stack on mobile. How would I get this container to stack on mobile, following this methodology? I know I can create a custom class and use ACSS variables to accomplish this, but wondering what method to use w/ plain ol' PB101 instructs.

[@Gearyco]

Not sure what you mean. It’ll stack if you change the tokens at the appropriate breakpoint

[@ThierryC-te3rx]

@1:03:57 Note for later: > *:nth-child(even) > *:last-of-type {order: -1}

[@marcom.jaeger7277]

great job as always

[@mcAmendi]

BEM! Another great tutorial!

[@maayanzi30]

Q - when are you using the clamp funciton with calc and when are you using without calc?

[@Gearyco]

Not sure what you mean. Example?

[@maayanzi30]

​@@Gearyco in 34:32 for example up to the h3 tag you are using calc inside the clamp function and below it you do not using it.

[@Gearyco]

Oh, I see. calc() isn't required in a clamp function. The use of it is redundant. It doesn't matter either way, it gets processed to the same conclusion.@@maayanzi30

[@maayanzi30]

@@Gearyco Thank you for clarifying that

[@JamesJosephFinn]

Man, I dig your style. Just subbed.

[@mackymccormack8446]

In general, do you use grid over flex for single axis layouts (eg a simple card) or is flex still the best tool in those cases?

[@Gearyco]

Grid is typically for structure, flex is typically for alignment. Card children get aligned, so flex.

[@HOLLYWOODxx5]

@Gearyco QUESTION: I have followed along with the repeat(4, minmax(0, 1fr) grid column layout, but my boxes all stack vertically and I can't seem to get them to expand out horizontally using the repeat function.. any direction on that? thank you!

[@Gearyco]

Could be a few reasons. Would need a link.

[@juanb.274]

Hi Kevin, I have a doubt. Wouldn't be a good idea to add for example the container gap (row and column) style in .brxe-container? and create a utility class like .gap-0 in case I want to have that? Don't want to take much of your time, if you just say NO I know you have solid reasons. Thanks for the great course!

[@Gearyco]

It can cause some issues if you’re using a framework, so I leave it out. Also, ACSS has the option to add it automatically so I do it there.

[@juanb.274]

Thank you for the answer@@Gearyco

[@PhilippBremer]

I cant express enough gratitude for your course! Its opening soooo many doors! Thank you! I have one question. If I make a grid of 3 items, but I have 7 or 8 items, is it possible to center the last one/s? With flexbox that's possible, I haven't figured that out in CSS grid...

[@Gearyco]

It's not possible with grid. But if you're using ACSS, you can use our flex-grid-- classes to do this. It requires a lot of flexbox calculations, but ACSS will do it for you if you use those utility classes.

[@jasone1025]

Is WPCodeBox required to be able to use the var() functions? Any other options?

[@Gearyco]

Nope. You can use ACSS now.

[@felixrivera2691]

This is awesome; I could not resist trying the alternating talking points card, but it did not work. I know you said to watch. I had to try, LOL

[@Gearyco]

Probably missed a small step. Post a link in inner circle and we can help you sort it out.

[@felixrivera2691]

@@Gearyco That is ok; I will move on to lesson 10. Thanks!

[@felixrivera2691]

@@Gearyco I returned and re-did the entire lesson, and yes, I missed a step. It is all working the way you have taught it!

[@maxzingy]

How do you inset an SVG file to replace the icon in the icon element?

[@Gearyco]

It’s an option in the element dropdown

[@FarisHammoud]

Great one as usual , I'm facing a problem when I try to apply root code ( order-1) .. it's not working for me by any way. what could be wrong ? Thank you.

[@Gearyco]

Not without a link

[@FarisHammoud]

@@Gearyco no worries i got it. Bricks requires % before and after root , however its not like that on the lesson but anyway that makes it workes ..Thanks Kevin.

[@Gearyco]

@@FarisHammoud yeah they changed it after this video was recorded.

[@reufjaha123]

Do you have ACSS course similar to PB101 ? Thanks.

[@Gearyco]

Probably a good idea

[@reufjaha123]

@@Gearyco so that means you will create it :P ?

[@marcovanderziel]

Thanks for this video. I used the BEM class grid-3 on a container, but when I check on mobile I can't change the classname and it's still 3 columns. Do i need to add some media query in my CSS?

[@Gearyco]

grid-3 is a utility class not a bem class. It’s not meant to be edited.

[@marcovanderziel]

​@@Gearyco Yes you're right. I was in doubt ;). I was to soon with this reaction, because in the next lesson you're making the messagely sire responsive.

[@ZachariahWiedeman]

What are the pros and cons of using this function for my grid columns? repeat(auto-fit, minmax(var(--column-width-min), 1fr)) Apart from the fact that this totally eliminates my breakpoints, I was thinking this might be helpful if I made it a token (--grid-auto) and didn't want to have to overthink how many columns I need when plopping grids into different sized containers throughout my page. Thank you to anyone who is able to answer this question for me!!

[@Gearyco]

You’re missing a min function in there. I think this will cause overflow issues on mobile if content width is too wide.

[@devindevlin962]

Awesome stuff, I have a question about utility classes from Automatic CSS while using BEM. Say I am creating a "talking-point-card" class and then I want to apply the grid-2 variable that you created in tutorial but I am also using Automatic CSS and feel the urge to simply apply the grid--2 utility class instead of creating my own variables, how would you suggest incorporating Automatic CSS in situations like this while still keeping the talking-point-card BEM structure maintainable for the future? Thanks!

[@Gearyco]

in the grid-template-columns input in bricks just put var(--grid-2)

[@devindevlin962]

Perfect makes sense now that I just finished the entire 101 series. Pair that with keyboard shortcuts for bricks tutorial and I feel like a god. Thanks, seriously!@@Gearyco

[@jcc5018]

around 1:04:42 when you assign things to root classes, That root is for the individual element you have selected right? If you want to do something similar with custom css alone, I think root would provide global variables, so would you instead target a class set on the section? so its be something like .talking-points > * nth-child(even) {...}

[@Gearyco]

Correct. “Root” in bricks is just a reference word for the current class/ID. So it’s basically like writing the class name.

[@AdhamMaher]

I'm really so happy with this course and I understand every second since lesson 1 and I can use bricks and other builders very very well BUT HOW CAN I REMEMBER ALL THIS AMAZING CSS POINTS during the development process!! :D ( I mean DRY ) - I'm worry!

[@mohdom6]

The universal selector now needs to be written as: %root% if it didn't work for you add the percentages

[@malaga16]

I tried out your global classes grid-1 to grid-6. example (repeat(5, minmax(0, 1fr)) My problem it isn't responsive. Just overflow. If i use example repeat(auto-fit, minmax(XXXpx, 1fr)) is responsive, but not fixed the grid number. (I have to calculate from container widht, how much have to set pixel for min-max) What I'm doing wrong? (I'm using Bricks builder too)

[@Gearyco]

Watch the lesson on responsiveness.

[@carlo3368]

Kevin, should the talking cards here actually not be in an unordered list?

[@Gearyco]

Wouldn’t hurt. Did I not make them a list? Can’t remember this far back.

[@groundpets5101]

hey may i ask, what chrome extensions are you are using to be able to write on your screen thanks :)

[@Gearyco]

Not a browser extension. It's an app called Pro Mouse.

[@stevewilkison]

At about 13:10 you talk about flexbox and you set each of the two blocks to 50% and it breaks the layout. Because, as you say, the parent has gap applied to it and flexbox can not handle gap so 50 + 50 + gap is more than 100. When I try this flexbox seems to handle the gap just fine. I set the parent to flex. I set a column gap to 100px. I set each of the two blocks to 50%. Everything works, they appear side by side on the page with a 100px gap between them. What am I missing here?

[@Gearyco]

Only when the container is set to not wrap. If you need the container to wrap, flexbox can’t handle the gaps.

[@stevewilkison]

@@Gearyco Thanks!

[@thecatchcrew555]

Bang on Kevin

[@kakenetit2]

Great lesson! Seems like less fire hose in the face now.

[@euandrefrancisco]

Hi Kevin, does WP Code Box have a free version? Or is it possible to tokenize the CSS in Page Builder itself?

[@Gearyco]

You can use the Child theme stylesheet

[@katewhelan2407]

Loving all of this and following along from the start but I'm obviously having some sort of rookie error and totally stuck at creating grid columns via the CSS point - have tried adding CSS both via the WP Code plugin as well as create a stylesheet in the custom settings but neither seem to be having an effect - only if I do it via Custom CSS on the individual page. Have spent ages going back and forth to check settings / my code but can't seem to work it out agh - any help would be appreciated! Thanks!

[@Gearyco]

Need a link

[@John.Rearden]

Good Lesson

[@africanhustle01]

Thanks a lot for this course. Is there anyone following along with vanilla HTML/CSS? I'm learning a lot by doing it this way.

[@LooWoo-d6q]

Why didn't my images scale up or down? The ratio changed.

[@Gearyco]

I would need to see a link

[@LooWoo-d6q]

I fixed it! Maybe it was because I didn't set HTML tag to figure? @@Gearyco

[@derekshort]

​I agree. I hate all uppercase. Felony violation. Lifetime prison sentence.

[@thierry-leadway]

Another fantastic eye-opening lesson! Thanks man!

nice one..

[@PeterEller]

that sounds like a SNL skit " Becky & Bev from accounting"

[@fatcatdesign]

time stamp 9:16... I almost spit out my coffee... "No fat shaming here, please don't cancel me" lol.... KG, don't you know you're uncancellable? :D

[@koperkuba]

Ive wanted to do homework but dont have wpcodebox:(

[@Gearyco]

There are other options. In many cases, the builder itself allows you to add custom CSS via a style sheet. codebox is simply my favorite way to do it, but it’s not required.

[@stripedgoat]

Sometimes I wonder where have you picked up all this knowledge from? :D

[@Gearyco]

15-20 years 🥵

[@aportmannch]

am i the only one or why can't i find var(--card-gap) in the cheat sheet?

[@Gearyco]

fr-card-gap - it’s part of Frames

[@aportmannch]

@@Gearyco ah ok, on 54:36 you use this variable. thought this was an acss variable at best 👍

[@Gearyco]

@@aportmannch It was a variable I made in a separate lesson, I believe.

[@MarkWilliams77]

UPDATE: Bev was so happy with my recent suggestions she insisted on coming over to my place and going over the details in person. Now, this may surprise you, but I'm looking forward to Bev's interjections (in fact I'm thinking of 'creating' more issues for Bev to find - all free of charge of course lol) - she ain't all that bad and got a body that rocks it - we worked out a deal that's win-win haha

[@Gearyco]

Oh dear. I’m afraid to ask.

[@curtismorrow4537]

"Do you want to go home, or do you want to go to jail?"

[@kevinrittershaus9380]

F****** Bev. lol

[@Kirolmh]

Hey Kevin, I want with all my heart to watch your videos and learn from you, for real, but why every time I play your videos 85% of them are you talking a lot of same words and repeating them? Come on man get straight to the point it's 7:13 minute and if you analyze all you said was that grid is better then flexbox. I would really appreciate if you could shorten your unnecessary words. Time is valuable.

[@Gearyco]

Important points made in the first 7 minutes... - Page Builders encourage flexbox, when they should be encouraging grid (be careful!) - Most page builder users only use flexbox, which is wrong - What to expect from this video - This training just scratches the surface of CSS Grid (Important so that you know there's more to grid than what's shown here) - CSS Grid is superior for content layout (but flex is useful for positioning) - Grid is for creating columnized dual-axis layouts - Grid gives you layout control from the parent container - Grid offers more control over size and placement of elements - Grid offers more control for element re-ordering - Grid offers more robust control for responsiveness - Grid supports flexbox alignment controls - Grid supports named layout areas - Grid is magical for overlapping elements - Visual demonstration of grid vs flexbox for 2-column layout You either: (1) Severely lack listening comprehension skills or (2) severely lack the processing skills to realize what's important and not important. People like my content because it's in-depth and covers everything you need to know. It's also 100% free and has no ads on it. If you don't like something about my content, then don't watch it. I'm not going to change my entire teaching style and personality to fit the desires of a random KZbin commenter. You can also use the fast forward button. Or the 2x speed button. Or whatever you need to do other than complain about FREE content. Saying "get to the point" when I made 14 important points in the 7 minute stretch of video you're calling out is fucking lunacy.

[@peterpinkster]

I've been building websites since 1999 and this video with its talk about token and clamp nonsense makes web design with a builder seem more difficult What a Nonsensical jargon. Clamp *2 clamp *3. But images with 3rem 4rem. I build sites before there were training courses. I was a teacher at school myself, but I refuse to talk like this.. sorry

[@Gearyco]

Tokens and clamps have nothing to do with page builders my friend. No need to stay stuck in 1999. It's 2023. CSS is far more efficient and powerful now. Time to level up!

[@peterpinkster]

@Gearyco token = css variable. --var? And,clamp is a waste of time. I don't know,what browser you use but I don't need to,change my font-size on mobile and desktop. And if I really want we still don't need clamp. We still have round wheels on or cars.. why make bumpy ride with hyper modern sqaure wheels. I've test your clamp theory but didn't find a benefit.. sorry.. that's my finding.

[@Gearyco]

I want a 60px h1 heading on my hero. How you gonna do that without media queries?@@peterpinkster I'm starting to get troll vibes.

[@peterpinkster]

@Gearyco I see you get pissed because i am not agree with you.. and ask me a kindergarten question so its better I leave you alone.. you can't handle criticism...shame

[@Gearyco]

@@peterpinkster 1. I'm not pissed. 2. You clearly can't answer a simple question. That's on you, my guy.