CSS Grid Span Rows and Columns - Elementor Wordpress Tutorial - 3.13 BETA - CSS Grid Container
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
selector {grid-row: 1/4;}
selector {grid-column: 1/3;}
This is how you use CSS Grid Span Rows and Columns - Elementor Wordpress Tutorial - 3.13 BETA - CSS Grid Container.
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your TH-cam Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk
I find myself watching one of your videos for the second time today to learn how to use Elementor. I appreciate your helpful guidance, Imran.
Buddy, been designing since 2002. Never was able to understand that. Now i do.
Thanks
No problem!
Thank you so much ! I couldn't figure out how to extend a cell in 2 vertical rows!! Again you are amazing !
This is going to open up many new possibilities, all the while making my brain hurt just a bit more! 😵💫 ❤
Told you it was worth the wait :)
Just break out VScode and get ta typing up a simple html and css grid, then you'll be ready for it when it does come in the final build.... just my two cent's anyway. see ya in the next live Monday. "Good job vmfx, leave out two important words so you have to edit it" damn rented fingers anyway ha!
glad to see you covered spans here. Your previous video about using an empty container or a spacer widget to create an empty space is (imo) misleading/bad advice for beginners. Spans are the solution for creating blank cells in a grid.
Indeed. Last night’s video was done quickly due to other pressures but I revisited for that reason after sleeping on it.
Thanks this is so helpful! It seems to not flow properly when you get to mobile though - any tips to help make it responsive?
You have to add @media for the span or set them to be 100% each
Many thanks Imran; this is definitely proving to be quite the noodle scratcher.
Is it possible to have the end layout using fractional units? Instead customer css on each grid container?
Yes (almost) as I found it fiddly and not great
Well, from that perspective we don't need Elementor to give us a grid option. Just use a regular container and set it to display: grid. Using custom CSS on each element is one of the worst things you can do.
Fair point
Love to see you do a video on mega menus and accessibility
Mega Menu: th-cam.com/video/J-3YwRrIzMU/w-d-xo.html
Accessibility th-cam.com/video/hoS99xvilAk/w-d-xo.html
Search for Mega Menu as I have about 4 covering that
Well, it seems to be very raw at this stage, looks more like an alpha than beta to me...
It doesn't have most of the properties and features that grid has, and you'll need to use css for everything that strays from the very basic grid. Might as well just do it all with code...
Hopefully they will add some more options, at least span before the release, otherwise it's quite useless imho.
Thanks for covering this.
Very early days but I hope to see it evolve
Thanks for the info and for confirming that is is not that great. I was excited about the grid container but it seems ridiculous (IMO) for Elementor to release the grid feature without being able to span rows and columns as part of the presented settings. On top of that, I cannot find where to position content within the grid. I was hoping for something that would streamline having to write CSS Grid code but it looks like I am going to just keep writing my own code as I know I can get exactly what I am after.
Are you using the codes to help position; ie: grid-column 1/3 etc?
@@websquadron Hey. Yes, I used the codes and it is fine if you want to use code but Elementor is selling itself on being able to build websites without writing code. Don't get me wrong as I love writing code and I have been using CSS grid in Elementor for ages. To me it seems a bit flaky to release something that you cannot really use stably (as it is still in Alpha) and it cannot do some of the key things like positioning content in grid cells and spanning rows and columns. Hopefully they will include it in the stable. IF they could do it the way that Oxygen builder does it then it would be pretty solid 👍
Still easier in Bricks with the Grid Item UI ;)
Is it not possible to this be done without any css code?
Not yet.
how would I Do if I want lets say the top left cell to extend to the middle of cell 2. To clarify, extending the top left cell to the entire 2nd cell of that row would be 1/3. But what if i want the top left cell to extend to 1/2.5 or 1/2.25 etc. Is there a css command that would allow me to set a row %? Love ur vids
Not 2.5.
But I would suggest having a row that is just 2 cells, so you get the split in the middle.
Then add a new grid that is 3 or 5 cells etc.
Column spaning will be introduced in the later stage for sure. If you look at the Alternative Loop grid feature, it is already there, but based on the flex.
The most important thing is how you "count" where it started and where it ends.
Anyway, CSS Grid is a powerful tool for building complex layouts and with Elementor it will be even easier.
You can use grid-column: span 2; or grid-row: span 2;
can this work without activating css grid beta version?
Not without grid.
Yes. You can turn any container, section or column into a grid and then span items inside it if you write the css yourself. Works great and not difficult once you understand css grid.
Elementor brands itself as a no-code tool, and if it can’t achieve span without code, people have to call them out for it, and not shill for it and make excuses for it.
They’ll be doing spam soon. Plus it’s just beta and I’m sure it’ll be added
And you didn't use CSS fr grid units why again?
I’m keeping it simple for people that are new to grids.
@@websquadron
grid-column: 1/1 syntax confuses the hell out of me. IMO there's no longer a need to use span which I think you know appeared in HTML tables. The explanation of what is different is literally correct but so is my (contention) that the use of fr units to span results in an easier way to think about spanning when writing the declarations while benefitting from complete control of the responsive flow of the DOM.
I asked ChatGPT:
Q: Evaluate the history of CSS Grid syntax and determine which syntax came first: grid-column: 1/1 or the use of fr (fractional units?)
A: CSS Grid layout is a two-dimensional layout system that enables developers to create complex grid-based layouts. The CSS Grid specification has gone through several iterations since its initial proposal in 2011. The history of CSS Grid syntax involves several stages of development, including experimental versions, and some features have been added or removed along the way.
Regarding the two specific syntaxes mentioned, grid-column: 1/1 and the use of fractional units (fr), both were part of the original CSS Grid specification that was released in 2017.
In fact, grid-column: 1/1 and the use of fractional units serve different purposes in CSS Grid. grid-column is a property that specifies which columns an element should span in the grid, while fr units are used to define the size of grid tracks relative to the available space.
Therefore, it's difficult to determine which one came first, as they were introduced together in the same specification. However, it's worth noting that both grid-column: 1/1 and fr units were preceded by earlier CSS Grid syntax, such as the grid-template-columns property, which was introduced in an experimental version of the CSS Grid specification in 2012.
// Did I say I can't stand using grid-column syntax? 😛
Totaler Müll. Wie bekomme ich es hin das ein Container innerhalb eines Grid über 2fr von 3fr läuft?
In case anyone is unsure, David said: "Total rubbish. How do I manage to have a container within a grid span over 2fr of 3fr?"
For you to call it rubbish there would be a) No point in me offering advice in case that is also rubbish (and I am being objectively fair to how you chose to comment) and b) for you to have a definitive view of the video (which you didn't have to watch) - what would you recommend?
Take care and stay safe.