How to Use CSS Grid inside GenerateBlocks (and why this spells the death of the Grid block)
HTML-код
- Опубликовано: 12 сен 2024
- *NOTE: What you're seeing in this video is an pre-alpha release of GenerateBlocks 1.9 and GenerateBlocks Pro 1.7*
In today's video I'm going to show you how the addition of CSS grid means the end of the Grid block - which we've used since the inception of GenerateBlocks to create multi-column layouts.
If you're not familiar with CSS Grid, have no fear - I'm going to give you a simple crash course on how you can get started with ZERO experience and continue to add new, advanced features to your tool belt as you go!
If you're interested in learning more about CSS grid, check out some of my favorite resources:
• Learn CSS Grid the eas...
• Learn CSS Grid in 20 M...
• Get started with grid ...
• Two simple layouts tha...
💻 Visit Our Website: theadmin.bar/y...
🗨 Join Our Free Community: theadmin.bar/y...
📨 Get the Best of The Admin Bar Delivered: theadmin.bar/y...
🔁 Sell More Care Plans: theadmin.bar/y...
🧮 Use My Website Price Calculator: theadmin.bar/y...
📜 Get My Proposal Template: theadmin.bar/y...
☑️ Get More Done with My Checklists: theadmin.bar/y...
🔴 Live Event Schedule: theadmin.bar/y...
🔧 The Tools I Use: theadmin.bar/y...
⚡ My Agency, OGAL Web Design: theadmin.bar/y...
This video, like so many of yours, was a great help to me, very well and clearly explained. Thank you, Kyle.
Great intro, I've got more to learn! **Goes to watch Kevin Powell CSS grid videos**
**A whole new worrllllddd**
Thanks Kyle! that's a great intro and thanks for the links to learn more about CSS Grid
Great tutorial and Thanks Kyle! This way is much faster for me.
Wow!
Kyle, I would appreciate if you could have a tutorial for Quill Forms. I recently used it and until the moment, it is really amazing!
Hello Kyle, I appreciate your video. I have a question regarding the implementation of a "grid-area" property within a GB grid block. Given that there isn't a predefined field for this in the current setup, would the correct approach be to introduce a custom at-rule? If so, could you guide me on specifying the values for this property, such as "grid-area: 3/1/-1/-1"? Thanks in advance, and best wishes.
I've figured out a method on my own. It involves assigning an additional CSS class to the GB container and incorporating some CSS rules. Here's a sample code :
```
.grid-area-item-3 {
display: grid;
grid-area: 3 / 1 / -1 / -1;
}
```
May this tip prove beneficial to your other followers!
Does the query loop block still use the old GB grid? Or is it possible to use CSS grid with the query loop block now?
You're forced to use the grid block.... For now, but not forever
@@TheAdminBar Well, hopefully the "but not forever" comment means you know something that gives hope! :)
Great tutorial Kyle! Thanks. For some reason I don't have the option to choose "Display: grid" after I create a new style. Should the display: grid be available by default? I'm using GenerateBlocks Pro. I'd appreciate a lot any tips on how to get the grid working. Thanks.
I don't have the option to choose Grid either in Layout > Display. My only options are Default, Block, Inline Block, Flex, Inline Flex, and Inline. Also using GB Pro, v. 1.7.0. Were you ever able to get this working?
@@jennicamusselman I decided to use flexbox in my project and didn't look into this a lot. But if I remember correctly the "Display > Grid" may be available when yoy create a GB "Global Style" first. Create a container in the Global Style tab and then try to choose Display > Grid. I'm not sure though if I remember this correctly.
"ADD OR CREATE STYLE" is this only in the pro version
Wow. Just wow.
Did this video get updated ? I'm seeing 14th of March, but I was sure I had seen this before!
I posted a playlist of all my 1.9 Alpha videos and shared it in the comments... However, all the videos were unlisted and I've just been publishing them out and making them public :)