Using CSS Grid to create responsive web design
Published: 2018-12-07 21:02:10

---
title: Using CSS Grid to create responsive web design
published: true
description: 
tags: 
---

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:

```css
@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. 

```css
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:

```css
  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:

```css
  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.