Use CSS Grid. It still uses a grid system which is similar to the idea of the grid system in bootstrap but gives you finer control and is just in plain css.

Further reading/docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Can any experienced front-end developer just explain how do they get the blocks in the right place when they start (You know like the CSS boilerplate)

I have been trying to learn frontend and although I have gone through the basics many times now, I still don’t know how to break the display into blocks and position them at positions where I want them to.

Once the outer divs are placed I am easily able to proceed but it’s the outer components that don’t fit in the right place. I have many things, grids, react components, flexbox, but every time I end up either setting the margins of the outermost wrapper manually (pixel by pixel by opening dev tools) or by using some existing templates out there.

I know people will say that show me the code, but the point is I do have code that works and there are no bugs, I do end up making the project. But why can’t I just do like position: absolute; margin: 12% 20% and get the outer div in the center. (Whenever I do that either shows a negative margin on either sides or if I try to manipulate an existing template, everything just breaks)

I get the themes from bootstrap and have gotten used to using them, but feel like I am trapped when I try to apply my own styles