DEV Community

independnt
independnt

Posted on

Using CSS Grid to create responsive web design

If you're at all familiar with web design, then you know that finishing your designs in CSS can really just be the middle ground. We still need to accommodate the user experience for tablets and mobile phones. More than 50% of web activity is now processed on a mobile platform, so nowadays, the mobile first design should really be the mindset. This dawned on me immediately after I brushed my shoulders off after having finished styling my online portfolio, which looked pretty great I might add. However, pull it up on a phone? It looked like hot garbage. That's where I got to learn about the importance of media queries. Altering the CSS based on the screen size. Now, elbows deep in React and using styled components, along with CSS grid, I find myself once again at the divide where queries would normally guide the way. Luckily, CSS grid has handy tools, known as the auto-fill, and auto-fit properties which can alleviate some of these previously tedious tasks.

Media Queries

Previously, if I wanted my application or page to be responsive, I would have to individually choose window sizes, and css that i wanted to scale with it, specifically regarding rows/columns with individual items. For example, it would look something like this:

@media only screen and (max-width: 767px) {
    body { font-size: 16px;}
    section { padding: 30px 0;}

    .row { padding: 0 4%; }
    .col {
        width: 100%;
        margin: 0 0 1% 0;
    }

@media only screen and (max-width: 1200px) {
  .row { padding: 0 2%;}
}

Here, i'm selecting the widths and dictating the specific row paddings and widths, which all works, and definitely makes the site more responsive, but recently working with react and having a page that works with grid, I came across auto-fit and auto-fill which made my life a lot easier.

auto-fit

Taking into example an app that takes an item and places it into a column on a grid format.

export const CoinGridStyled = styled.div `
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 15px;
  margin-top: 30px;
`

Here this gives us 5 columns, each at a fraction of the page, regardless of size. Even though if we expand the window, or shorten it, there will always be 5 items per row, simply adjusting in size. But if we were to change this to auto-fit like so:

  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));

Now the row will always fit what it can. So expanding the window, will yield more than 5 items per row, depending on the size, and up to 130px, will do the same. So now, my row will have a minimum of 2 items (the max it can fit at 130px) or up to 10, as the window expands. But this means that even if i only have One item, it will stretch that item to fit the page length. More precisely auto-fit "fits the currently available columns into the space by expanding them so that they take up any available space. So instead, in this case, I like auto-fill.

auto-fit

Here, we'll include this code:

  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

Now, with auto-foll it "fills the row with as many columns as it can fit". So now, objects are not being stretched in any way. There is a set amount of space, and each object takes up the space is needs and no more.

Now with gird, we won't always need media queries, thank the lord.

Top comments (7)

Collapse
 
davidburbury profile image
David Burbury

I built a site recently using CSS Grid and one of the things I learnt was that IE unfortunately doesn't support auto-fill and auto-fit. Just thought I'd point that out in case you ever need to cater for IE.

Collapse
 
andrej_gajdos profile image
Andrej Gajdos

Did you try to use PostCSS? css-tricks.com/css-grid-in-ie-css-...

Collapse
 
jauhari profile image
Nurudin Jauhari

Any Live Demo?

Collapse
 
millierosy profile image
Millie Rosy • Edited

I am new in development and recently launch a website which is eCommerce shopping based website I have fixed almost its all issues just stuck on responsive this website leatherchase.com/ is fully responsive in all devices except iPad so, I am confuse and worry about it. May anyone tell me about it that how to fix this issue

Collapse
 
vishwa profile image
Vishwa

have you used any css framework like bootstrap or foundation? if your site looks terrible in ipad, you can specify css media queries just for the ipad (both portrait and landscape modes)

Collapse
 
soliddom profile image
Dom Davis

Do you have an example of your portfolio using the grid system?

Collapse
 
brokenthorn profile image
Paul-Sebastian Manole

Your second header should read auto-fill but instead of that you have two auto-fit headers in your article.