JSF doesn't support rowspan or colspan, much to many people's annoyance. There was an extension tagset that did, but the common approach is to define one's grids or tables according to their maximum spans and then embed sub-tables/grid within them.
The preferred way to set physical size and location of elements in JSF is via CSS, the way your second example did. You can do it by "brute force" (style=), by CSS class, by element type, or by ID, although the CSS ID will only pair up if you use the generated HTML ID of the object in question, not the JSF (short) ID.
You don't need all those div elements. A raw HTML div is functionally equivalent to a 1-column panelGrid with one element in it.
Finally, don't forget that when using extension tagsets, that often there are special CSS classes defined for the extension tags, so you can override those if you want a consistent appearance of similar components.
The secret of how to be miserable is to constantly expect things are going to happen the way that they are "supposed" to happen.
You can have faith, which carries the understanding that you may be disappointed. Then there's being a willfully-blind idiot, which virtually guarantees it.