Responsive data tables with CSS Grid

Daniel Salvado
Jun 4, 2018 · 4 min read

This article aims to give an insight over CSS Grid and provide some examples how I’m making use of it in my daily work.

Disclaimer: The names used in the article are entirely fictional and any resemblance to reality is purely coincidental.

Grid Layout is a new CSS feature that allows the creation of beautiful and simple layouts with a system of columns and rows to make the design of web pages hassle free! It has support from all major browsers since October 2017.

I have become a fan of CSS Grid since I saw this awesome course by Wes Bos!

In one of the projects that I worked at Evodeck, I saw a shot to implement data tables using Grid Layout and decided to give it a try. I made sure to choose something smaller so we could have the chance to rollback or change to something else in a way that wouldn’t have a huge impact on the development process and the progress of the application.

For visual purposes let me show a small example how easy it is to use CSS Grid. Bellow, we have a table built with some fictitious user data.

CSS Grid data table
A snippet of the table HTML code

Guess how many lines of CSS code this table has?

CSS Styles to build the upper table

12! That’s right only 12 lines of CSS and the magic happens on lines 2 and 3, it is there that we describe that the HTML element with a class of grid should display its content as grid and have 5 columns each with 1 fraction (1fr) of the available space! 😲 And with nothing else, it’s responsive by nature! I also used the CSS repeat() function, to know more about it, check it here.

Responsive CSS Grid

Alright, the magic expression “1 fr” means that the element will occupy one fraction of the available space! And that allows us to create columns with as many spaces as we need and remove the necessity to work with a fixed width!😮

Now imagine that we need to have the columns with different widths, all we need to do is to specify that, like this:

Columns with different width

By this, I mean

  • let the “Id” column should take up 1 fraction of the available space;
  • the “Full Name” and “Email” columns should take up 3 fractions of the available space;
  • “Country” and “Created at” columns should take up 2 fractions of the available space;

The result is:

Table with different column widths

And we can do much more! If we want to work with fixed widths instead of fractions, we can also use the minmax() function. For example, if we want to have a fixed width in the first column with a minimum of 50px and a maximum of 100px, the code would look something like this:

Id column with a minmax width

And then, the final result is the one below:

Id column with a minimum width of 50px
Id column with a maximum width of 100px

While the most common use for CSS Grid is for building layouts with the grid-template-areas, I also find it very useful for tables!


In short, I found CSS Grid very useful and easy to work with and in my opinion, it does have a future and is something that will be very well adopted by the community!

I will not enter into details or discussions why you should choose Grid over Flexbox or Tables, I just chose to use the Grid simply because I found it very easy to work with, uses less code than the Tables, it’s less complicated than the Flexbox and finally it has a lot of functionalities out of the box, we just need to know how to take the most out of it! Like I usually say:

There is no such thing as a perfect tool, every tool has its advantages and disadvantages, so you should go with one that you feel comfortable with and solve the problem in the best possible way!

And as Phillip Sweet says, always be open to learn!

“Stay true to yourself, yet always be open to learn.”
— Phillip Sweet

I would like to share a couple of resources that I find to be very useful:

Thanks for reading the article, if you have any thoughts, suggestions or ideas, please share them in the comments below!

P.S.: This story can also be found at my website https://www.danielsalvado.com/blog/responsive-data-tables-with-css-grid/

Evodeck Software

Hi, we are Evodeck Software, a young company located in…

Thanks to Gustavo Jordão, Marco de Freitas, and Emanuel Ey

Daniel Salvado

Written by

JavaScript enthusiast, Front-end developer and eager learner

Evodeck Software

Hi, we are Evodeck Software, a young company located in Faro, Portugal. Since formation we are developing cutting edge Apps based on the (ME)AN Stack, Angular 2, React and Node JS. We are engaged German and Portuguese enthusiasts with passion for our purpose!

Daniel Salvado

Written by

JavaScript enthusiast, Front-end developer and eager learner

Evodeck Software

Hi, we are Evodeck Software, a young company located in Faro, Portugal. Since formation we are developing cutting edge Apps based on the (ME)AN Stack, Angular 2, React and Node JS. We are engaged German and Portuguese enthusiasts with passion for our purpose!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store