I am building my first site and struggling to understand how to best approach setting up a custom layout grid for each breakpoint in Webflow. I want to create 12-column, 8-column, and 4-column grids with specific measurements that ghost behind the other elements but remain visible for me to work on, and which I can then also span other elements across (overtop of the grid, without displacing its columns). I see that there is a columns feature in Typography for each element where you can set up columns, but I do not have a good grasp of how it works and it seems too limited for my purposes (but maybe I just don’t understand). Right now, I have set up a Grid element with colored “column” divs, but whenever I try to span another element across the columns, the colored div just gets displaced and pushed down the page. I am sure there is a simple solution to setting up a workable design grid, I’m just not figuring it out quickly enough and thought I’d enlist more experienced help. Thank you!
BTW: grid is only “imaginary” tool to divide free space, but there is many great turorials out there (search keyword === CSS Grid) to get into and understand what and how
Thank you! Is CSS Grid the way that most designers set up layout grids to work on? Because I cannot find a way to make a visual guiding grid via a CSS Grid
hi @SarahKylie majority designers come from “Desktop publishing” paradigm means work on design for “paper”. Graphics Design has its own grid Grid System but to understand what Im talking about you should take some design classes to get graphics design principles.
generally speaking “YES” Graphics designers use “Grid system”. CSS Grid is almost identical to Grid system for graphics…
not sure about this statement as WF provides visual feedback for CSS Grid
So you do not need any extra grid in your project as it is extra work. But if you really for some reason need one here is an example I have done few years ago just for tests. it is not “responsive” as you will need create one for each viewport and display/hide you need. But like I have said once you do your prep (mockups) you do not need to do this kind of work.
But Im not here to teach. Feel free to investigate your self how are things done as internet is amazing source of knowledge.
Here are recommended books to buy or you can find it in pdf on internet (as some universities have them accessible) to get understanding what Grid generally is and what is used for and why.
