June 6, 20188 yr Hello everyone :) I am working on a grid type layout and really having troubles and hoping someone might be able to help. The background colours should be full width whilst the content should be contained and have a max-width. I have managed to extend the background colours outside of the content areas by absolutely positioning them. This however, doesn't work when there is more than two blocks per row. I have attempted this about 20 times and cannot figure out how to achieve this on a responsive website. Can anyone help. Attached is a very basic example of what I am trying to achieve. Thanks in advance.
June 6, 20188 yr Here's a really rough version of a layout like this, that's compatible in older browsers. I would consider refactoring my class names because the code isn't very re-usable, and likely won't fit within the naming you have currently. Hopefully you can see what's going on though. https://codepen.io/jackpallot/pen/NzrEdG
June 8, 20188 yr You want to divide your pages up into sections with the background colours on them. Then inside of each section you put a grid. You can have as many grids as you like on a page and nest grids within grids. Feel free to use the grid in Nebula https://nebulaui.github.io/nebula/api/objects/grid?GridActiveTabId=html
Create an account or sign in to comment