CSS3 provides couple of powerful concepts to create layouts: Grid and Flex. The former uses a top to bottom approach and later uses the reverse. Both these concepts are well supported by browsers except IE11. Though there are advantages in leveraging CSS to accomplish layouts (for example, we can make them responsive through media queries) there are benefits in leveraging a HTML like declarative approach. Angular provides a powerful concept called directives that helps to enhance HTML by adding custom behaviors to it.

In this post, I'm gonna show you how we can create couple of directives that helps to craft layouts using CSS3 grid. As a bonus, I also show you how we can make the layouts responsive. I'm also glad to introduce you the library angular-bone which is a real world implementation of this sample that supports both flex and grid layouts.

Continue Reading →