CSS Grids : An Approach to Common UI and Layout Problems
I’ve been using CSS in my work for a couple of years now and I have seen the rise and fall of certain techniques and best practices in tackling different UI and layout problems. From the use of tables in the early days to the popularity of the Flexbox approach and now the adoption of CSS Grids as the layout standard, CSS has always been a fun and progressive tool that will surely be around for years to come.
In this article, I will be showcasing different UI and layout problems and how I implemented them using the more common and traditional approach and then comparing them to the implementation using CSS Grids.
I’ve chosen four popular examples that most designers can relate to. And these are: Horizontal Navigation, Card Layout, Holy Grail Layout, and Forms. In each example I will be discussing the pros and cons of doing it in both of the approaches.
The horizontal navigation is a very common feature in most websites. Mostly it acts as the main navigation for users to navigate and browse a site. Every web designer has his fair share of implementing horizontal navigations so it is just proper that this is my first example.
Below I implemented a horizontal navigation using Flexbox:
This is a common and efficient approach. It has a feature of being responsive and you don’t need to explicitly set the anchor tags as inline-block elements to be rendered correctly. What I don’t like about this is the implementation of gutters between the links and the need to set the margin to zero for the last element of the navigation. It is a small thing but it adds extra code which I feel is not elegant.
And below is my implementation using CSS Grids:
I like the elegance of implementing it using CSS Grids especially the easiness of declaring the gutter using grid-gap. So for this round I choose CSS Grids as the winner.
The card layout is a popular choice among websites and web apps that showcases photos and videos as their main content. It is also often being used in e-commerce websites to show the different products and services that they offer.
Below I’ve implemented the card layout using Flexbox:
I find this approach very hard for a couple of things:
- You need to compute explicitly the width of each card depending on how many cards you want to show up in each row.
- The width of your card is somewhat dependent with the gutter value applied and if the gutter value changes most likely the card layout rendering will also be affected.
- And third, I just don’t like it…so many frustrating memories. #hugot
And below is how I implemented it using CSS Grids:
Looking at the code above, card layouts is a breeze to implement. It does not have the issues I mentioned when implementing using Flexbox and with CSS Grids you can just set a minimum width for your card and your layout can just responsively adjust the number of cards being rendered in row.
CSS Grids unanimously wins this round.
Holy Grail Layout
What is the holy grail layout? Well this term was coined a couple years back when CSS implementation of page layouts is still at its infancy. Basically, it is a page layout with a header, 2 sidebars, main content in the middle, and a footer at the bottom which also behaves as a sticky footer when the main content is not long enough.
I have implemented this layout below using Flexbox:
I think it is a very straightforward solution. As compared to other older implementations like floats and margins this implementation is way more elegant and simpler. One downside though is the use of an extra markup that contains the main content and sidebar elements. I’ll show it in my CSS Grids implementation on how I removed this extra markup to make it simpler.
Below is the CSS Grids implementation:
I’ve simplified the markup and assigned each section as grid areas. I love how easy and clever the layout is implemented and how easily the responsive side of it is implemented.
Again, CSS Grids win this round.
My last example is a user interface that has been around since the early days of the web. Used in signup, sign-in, shopping cart checkouts, surveys, etc… There are many ways designers render forms and for this example I have chosen to implement the form layout the most basic I know how.
Here it is using just basic HTML/CSS:
And here is my implementation using CSS Grids:
The CSS Grids implementation is still a superior approach than the basic HTML/CSS for a couple of things:
- It resulted to a simpler markup since I don’t need to add containers to form elements
- The ability to add labels and form elements dynamically on their corresponding grid cells
- …and the Submit button which I was able to place using grid-row allowing me to get rid of the margin implementation.
The traditional approach is pretty straightforward but I still like the CSS Grids approach.
— — —
That was my take on implementing CSS Grids. I am positive that it is a powerful tool that can allow us to be more productive and efficient.
I guess the next question is, can I use CSS Grids? Well we can check it here http://caniuse.com/css-grid/embed and decide if it is for us.