There is no magic bullet that will teach you how to lay out a page other than understanding how the various css properties work and interact with each other. A good understanding of CSS is essential before you start using any tools or frameworks or you will just get completely lost.
The problem (and the beauty) of CSS is that there are many ways to do the same thing but in most cases there is one right way that and this will depend on the dynamics of the application you are building. For other layouts you may need a different approach as web pages are living things.
Laying out a page in CSS is indeed pretty simple in most cases and you don’t have to learn a great deal. The main thing you need to do is control the flow and not absolutely place elements that are needed to control flow of the page.
In my opinion grids and frameworks make it harder 9 times out of ten to lay out a page as the grids soon become a prison that you can’t break out of and in the end you either end up changing everything or changing nothing.
It takes a few minutes to set up a few columns with vanilla css so why would you load thousands of k of code to do that job? There are some good things about frameworks (like bootstrap) but its all the other goodies that go with it (scripts and standard elements) that are useful but the grids themselves are not that helpful especially as they are floated and in most cases display:table-cell would be a better approach.
The key concept is ‘flow’ and this means that one item will follow another naturally in the page. Which is what it will do if you don’t add any styling. It’s only when the coder gets hold of it that things go wrong 
Maintaining the flow means you can add/remove elements anywhere in the page without having to adjust all the other elements as well. Although in reality adding an extra element into the mix will incur some changes especially in a responsive layout.
When you need horizontal alignment (colums perhaps) then you have three choices.
-
Floats (In most cases they must have widths if holding unbroken fluid content and be in source order)
-
Display:inline-block (again you will need widths if you have fluid content and there is a white-space gap between columns that you will have to deal with (there are fixes))
-
Display:table-cell (my favourite (ie8+)). You will need to use border-spacing to get space between columns but you don’t actually need any widths as you can let the table distribute items equally or you can set widths on one element only and have others fluid. The only thing you can’t reliably do is to move columns around using relative positioning as you could do with floats.
With the above methods and a small amount of absolute positioning you can lay out pages quite easily.
There are drawbacks and advantages to each method but my favorite the days is display:table-cell (with a display:table parent) as that gives stable column that don’t drop (unlike floats) and don’t panic when content stretches them. You also get free equal height columns into the bargain. Of course there are drawbacks and positioning elements inside table-cells is awkward and moving cells in respect to other cells (as mentioned above) in not an option as they must form the usual row/colum/grid effect that tables imply.
Floats are ok but tend to drop down when squeezed and you have to make sure that they are contained (clearfix) and that content that follows doesn’t wrap or bleed underneath the floats background.
Into the mix you should understand margin-collapse and how that effects margins on various elements and then you are good to go.
It would be helpful if you could describe the things that you are having problem with and then we could provide examples or hints on how they would be coded efficiently?