I had a breakthrough in understanding how to leverage the full power of CSS Grid, and I share everything in this video, so you too can start creating impossible layouts for WordPress.
Test For Yourself: https://app.zipwp.com/blueprint/learn-css-grid-yzb
CHECK OUT MY PRODUCTS
🟡 ZipWP (AI Website Builder) — https://www.wpcrafter.com/zip
🟡 SureCart (Ecommerce) — https://www.wpcrafter.com/surecart
🟡 SureMembers (Membership) — https://www.wpcrafter.com/suremembers
🟡 SureTriggers (Automation) — https://www.wpcrafter.com/suremembers
🟡 Presto Player (Video & Courses) — https://www.wpcrafter.com/prestoplayer
🟡 LatePoint (Booking) — https://www.wpcrafter.com/latepoint
🟡 CartFlows (Sales Funnels) — https://www.wpcrafter.com/cartflows
RECOMMENDED STACK OF TOOLS (BEST OF THE BEST)
🟡 Astra (Theme) — https://www.wpcrafter.com/astra (SAVE 10% Coupon WPCRAFTER)
🟡 Spectra (Page Builder) — https://www.wpcrafter.com/spectra
🟡 Hostinger (Good Hosting) — https://www.wpcrafter.com/hostinger (SAVE 75%)
🟡 Cloudways (Premium Hosting) — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
CONTACT WPCRAFTER
☑ Website — https://www.wpcrafter.com
☑ Facebook Group — https://www.facebook.com/groups/wpcrafter
☑ Twitter — https://twitter.com/wpcrafter
☑ Twitter — https://twitter.com/adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
In this video I'm going to show you how To create impossible layouts using Something called CSS grid and it's hard To work with it's hard to understand but I had a breakthrough moment with CSS Grid that made me understand how it Works and I'm going to try to teach that To you in this video but here is some Examples of what you're going to learn How to create in this a video so CSS Grids are also commonly known as uh B Box styles I don't know if you've ever Been to a Japanese restaurant and you Ordered a Mento box and you had some Sushi here you had some rice here some Salad here maybe a meat over there and That's what a grid is or a Bento Box is Creating a unique layout that doesn't Follow a traditional pattern of rows and Columns and stuff like that and you see These everywhere these days on Modern Websites they're hard to create there's Not great tools to create it but I'm Going to make it easy for you to create I'm going to show you a tool that makes It so easy to do uh you're going to be Blown away so here's a a a grid uh you Can see how it follows a non-standard Pattern of columns and layouts or Containers whatever you want to call it Uh this one has a bunch of things moving Around but you can easily create one Like this and with the things moving Around if you had some motion animation
Going on uh here's a different kind of Grid there's very little gap between Everything there's these white lines and It follows this really nice looking Layout uh there's just so many examples Here's a a complex one I probably Wouldn't use something like that but it Looks really nice um this is the one I Actually like the most uh and then Here's like a real basic one uh to make So I'm going to show you how to do this I'm going to show you the Breakthrough That I had and hopefully it helps you Have a breakthrough so that you can Create these impossible layouts that are Traditionally very very hard now we're Going to be using a pre-release version Of Spectra Spectra is used on they're Approaching a million websites which is Pretty amazing and but what but what You're going to learn you can apply to Any page building tool that offers CSS Grid unfortunately most of them don't Offer it and if they do offer it they Don't have the controls that you need to Easily manipulate and set up your grid Uh Spectra offers both it has the CSS Grid that is added to the block editor It has all the controls to easily be Able to position things now if you're Using a builder that has grid without The options uh just means you have to Add some code to it in order to to get It to be how you want but what I'm going
To show you today the Breakthrough that I had it will work regardless of the Page building tool it just so happens We're going to be using Spectra which is Releasing CSS says Grid in a few days Now the good news is I put a link in the Video description when you click on that It's going to recreate a site with the CSS grid and the grids that we're Talking about in this video so you can See exactly how I created them and it's A total test environment you can you can Uh hack away at it all you want and the Site will be good for 4 hours so all you Have to do is go in the video Description and click on the link uh so I'll go ahead and uh create that now I've just entered the link I'm hitting Enter and you can see the site is being Recreated uh for me right before my eyes Uh there's no login or registration or Anything like that required literally Just click on the link it's going to Open up in your browser and you'll be Able to follow along in this video with The CSS grid tool that we're using Inside of this video and that's it that Probably just took a under a minute and We have this now let me show you what's On the site uh I also built this site Using the AI website builder in zip WP So that's why it says all this text and There's these about and programs and all That I said make me a website about
Learning how to use CSS grid but what You want to see is the examples that I Added here so here's a grid example Number one you can see each of these Containers in the grid are taking up Different widths and Heights and they Even have a unique order right one two Three four and then here is five you're Going to learn how to do this here's Another example that I have queued up For you and this grid is a little Different because these are just images It's not containers so creating this was Very easy and it's very light on the Code um all right and we have a info Here info there it's just a nice looking Grid here's a more complex example Example number three and I'm going to Show you how to recreate this right now Uh right here you could see we have five Containers one two and then down here is 3 four and then we have five in this Unique location and that's one of the Nice things about CSS grid that you're Going to learn is how to position these Wherever you want inside of the grid it Doesn't have to follow a higher arcticle Order it can these elements that you Have in the grid could could be placed Anywhere that you want now you're only Hearing this uh from me and this is the Breakthrough on how to build these grids That I had so there's two parts to a Grid there's the structure and that's
Where we're going to set how many Columns and how many rows to recreate a Grid just think of an Excel spreadsheet Or a Google sheet where you have columns And you have rows and those columns and Rows have positions right this is like Column A or B uh this is is Row one or Two so there's two aspects to setting up One of these grids and having full Control over it one is to set up the Structure of the grid but then the other One is to create a map of the grid and The map is what you need in order to Perfectly and precisely Place elements Anywhere you want in the grid so you Need to understand the map concept and This was the Breakthrough that I Discovered that you need to have a map These are separate things let me show You what I'm talking about let's build a Structure for this and then let's build The map for this and then we'll recreate It and it's all going to make sense so I Am going to take a screenshot of this Using my screenshot tool and it's going To pull up perfect okay so what you want To do when you're looking at any grid That you want to recreate is try to Figure out how many rows and column or Columns and rows that you need to create This layout so I'm going to do this H Step counter right here perfect so I'm Going to try to figure this out okay so I'm going to put a one here on the top
Left and this is my first column and I Just need to like visually gauge how Many columns I want so for this uh Here's where my second column is going To be my third column and my fourth Column so to create this grid I need Four columns and um I am going to now Determine how many rows I need to make So one then this right here is going to Be the second column and it looks like I Just need two columns so to recreate This I need four rows sorry columns and Two rows let's go and make that right Now and then we're going to come back And we're going to build uh the map so This is the structure but then we need To build the map I'll go here and let's Create a new page I'm going to go to new I'm going to do page and then let's just Go ahead and call this grid example 4 And let's go ahead and throw down a Container perfect and I'm just going to Choose this container it's got nothing In it now with the container selection Ed over here on the right at the bottom There's this layout option and this is What's new you always had flexbox with Spectra they were one of the first to Bring it to the block editor but here's The new Option it's called grid and when You click on that we see all the options Change so right here is where we set up The columns and the rows for the grid And we just realized from here that we
Need four columns and we need two rows So I'm going to go back and if you want To add columns you click on this plus And you can see it gets added so let's Go column three column four and for rows Column uh row two so now I have set up This grid and uh it it has the structure That I know that I need so now let's uh Put the containers inside so you can see I've got five containers 1 2 3 4 and Five so I'm going to go ahead and add Those it's very simple I'm going to Click on the plus and I'm going to add a Container and you can see there it is Now I'm going to style this and then I'm Going to duplicate it let me style it First so when I click on it I'm going to Add a different background color I'll Just choose this from the color palette And then inside of it I'm going to add a Heading just like this and uh for the Heading I'm going to put the number one Uh let's go ahead and uh change the Color of the heading I'll go ahead and Make that white uh there it is perfect Uh now what I want to do is I want to Duplicate this container uh so when I Click on it actually here let's click Here to show the list View and I can see My container right here I'm going to Duplicate it and we'll get those five Containers so you just click the three Dots and duplicate like that and let's Go ahead and and have five containers uh
There we go now I'm going to change the Number for each so I just entered the Numbers of the order of the containers Now it's kind of hard to see these Containers uh because they're all using The same background image so let's put a Little bit of gap between them so if I Click on the parent container which has All of our uh grid settings like this uh And there's also alignment options here Maybe we should align it right now so I'm going to Center um the items the Numbers so when I click on the container Here I have my grid settings but I need To go to style spacing and I'm going to Add a little bit of Gap and GAP is the Term of the spacing in between rows and Columns so I just added some row spacing And you have all the controls here Pixels percentages VH all of that and I'm going to add 20 so now you can see They're kind of separated out a little Bit so you can clearly see uh each of These uh containers quite easily so now How do we make this look like this so The first container you can see is Taking up two columns of spacing you Could see column one and column two so It's taking up two columns so we need to Click into the container and say this Container needs to take up two columns Of spacing it's very simple simple so I'm going to go back I'm going to click On the first container now each of these
Containers have some specific options Here that say grid item settings and When I expand it well here it is column Width so I can say it takes up two Columns I literally click in there and Just enter two and now you can see it's Taking up that double width just like Here so the second container is taking Up just one column of width and one Column of height so I don't need to make Any changes there uh the the third Container is taking up the same the Fourth container is taking up the double Width and we'll do with this fifth one In a second okay so it was the fourth Container right here was also taking up The double width so I'm going to go in There and I'm going to put a two in for The column width and there you have it Now is the question how do we get this Fifth container to be up here on the top Right and take up double height just Like this it's the fifth container how Do I get it from where it's naturally Showing here how do I position this Where I want and that is where the grid Map idea comes in that was the Breakthrough so we understand this Concept we built out right of columns And rows but the map is different so the Way you need to think of a map is I know I have these four columns here let's go Ahead and put the number five at the end This is the map okay so it's a little
Different so let me uh reset my Numbering uh this is one uh let's see Wait one uh two and three so now I'm Building out a map let me just go ahead And uh delete that great so this is Different from the structure it's the Map okay and a real easy way to create The map is just add an extra number at The end so for the rows I have 1 2 3 4 And for the map I added this number five And for uh the so sorry this was the Columns and for the rows one two and Three now don't get this confused with The structure I only have four columns In the structure and two rows the map is Different and the map is how we're going To custom position any element wherever The heck we want inside of the grid so There's an option right here when I Click on any of these containers you saw The simple right that's where uh right Here for the first one I said this grid Item settings the simple setting would Be okay it's going to take up two of the Columns on the width but there's this Advanced option and the advanced option Is what you're going to use when you Want to position an element anywhere you Want in the grid and you simply need to Specify based on the map where it starts And it finishes in the positioning where It starts and it finishes in the POS Positioning so I need to know where it Starts for the column and ends where it
Starts for the row and it ends this is Actually very easy if you have the map And you view the map different from the Structure so if I wanted here I needed To start at column I needed to start at Position four for the column and end at Position five I needed to start for the Height at one and end at three and watch This is where the m magic happens so I Clicked on Advanced and it was going to Start at 4 and end at 5 see it moved Over and then for the row start it's Going to start at one oops not four one And then enter three and you can see the Magic just happened we were able to Accomplish this layout right here where It's column 1 2 3 4 and five is custom Position and uh and and it was very easy To accomplish if you understand the Mapping system and that's the key to Unlocking these unpossible layouts is Understanding how to set up the Structure and then how to set up the map The map is the key to positioning any of These container items wherever you want And each of these containers have the Advanced setting option for those blocks Or containers that you want to custom Position wherever you want inside of a Grid and this is how you can accomplish Some of these really difficult layouts Where the positioning just doesn't Follow the natural order it's very Unique in how it's done here this one's
Actually very similar to what we just Created now what's nice about how this Is inside of Spectra is it unlocks all Of these options that power users would Need and you can ease into in your Education and learning about creating Impossible layouts using CSS grid so you Saw on the child container level there's This option that says grid item settings And you can have simple where I wanted To take double width or double height or However much width or however much Height but then there's the advanced Option here for positioning as well as At the parent level container where we Set up our grid right here you can click Into these and there's all kinds of Extra options to get this to be exactly How you want we have advanced properties For auto min max I just left it at Custom and I would recommend that you Leave it at custom as well as you're Easing into learning this grid system And how to structure it and how to map It out now you also aren't done yet you Need to check the mobile settings for Your grids and there's complete mobile Responsiveness options so if you want This grid to look different on a tablet Different on a mobile maybe you just Want it all stacked on a mobile you can Easily do that because all those options Are right here and you're going to need To do that uh especially if you're using
The advanced settings on the desktop for One of these containers you're going to Want to go in and you're going to want To check and verify those mobile Settings to make sure the grid is Looking exactly How you want it on mobile devices so to Recap the key to understanding these and The Breakthrough that I had was Realizing that the structure is Different from the map with the map you Could position anything anywhere but you Got to understand the differences how to Structure it and then how to build out Your map which is your easy guide to Custom positioning and it's all very Simple now what I showed you is coming To Spectra it's built it's going to be Relased in in like a week but if you Click in the link down below it's going To recreate the entire site for you and You can start learning hacking away at It figuring it out now so that you can Build these impossible layouts so I Don't usually beg for thumbs up and Subscribes and all of that but if you Have benefited and had a breakthrough of Your own just now give this video a Thumbs up and if anyone's not sure how Grid works share this video CU it could Be used regardless of the building tool That you use it's just this concept that Makes it really simple for anyone to Build these impossible layouts thank you
For watching this video if you have Questions ask down below I'd love to see Some of the impossible layouts that you Build thanks for watching and supporting This Channel and I'll see you next time
