Different number of columns based on device

Question

I'm trying to create different number of columns based on the device.

For example: on mobile I want 2-col layout and on desktop 4-col layout etc...

I've tried messing around with minmax() , but couldn't make it happen the way I want, any advice for achieving this with minmax().

would someone have the answer?

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>

Answer 1

Not sure how you want to layout your Grid regardless you will have to use Media Queries and define each of your columns.

Example:

div class="col one">1</div>

div class="col two">2</div>

This is the mobile lay out

   .wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "footer"
    }

This is the Tablet lay out

    @media only screen and (min-width: 500px)  {
    .wrapper {

        grid-template-columns: 20% auto;
        grid-template-areas:
    "header   header"
        "sidebar  content"
        "sidebar2 sidebar2"
        "footer   footer";
    }
    }

This is the desktop lay out

    @media only screen and (min-width: 600px)   {
        .wrapper {
      grid-gap: 20px;
            grid-template-columns: 120px auto 120px;
            grid-template-areas:
      "header  header  header"
            "sidebar content sidebar2"
            "footer  footer  footer";
            max-width: 600px;
        }
    }

Here is an example of using css grid with Media Queries. In this example, box is followed with a unique div class name. You can use that class name to layout the grid.

body {
  margin: 40px;
}

.sidebar {
        grid-area: sidebar;
    }

    .sidebar2 {
        grid-area: sidebar2;
    }

    .content {
        grid-area: content;
    }

    .header {
        grid-area: header;
    }

    .footer {
        grid-area: footer;
    }

    .wrapper {
        background-color: #fff;
        color: #444;
    }

  .wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "footer"
  }

    @media only screen and (min-width: 500px)  {
    .wrapper {

        grid-template-columns: 20% auto;
        grid-template-areas:
    "header   header"
        "sidebar  content"
        "sidebar2 sidebar2"
        "footer   footer";
    }
    }

    @media only screen and (min-width: 600px)   {
        .wrapper {
      grid-gap: 20px;
            grid-template-columns: 120px auto 120px;
            grid-template-areas:
      "header  header  header"
            "sidebar content sidebar2"
            "footer  footer  footer";
            max-width: 600px;
        }
    }

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%; 
}

.header,
.footer {
  background-color: #999;
}

.sidebar2 {
  background-color: #ccc;
  color: #444;
}

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box sidebar2">Sidebar 2</div>
  <div class="box content">Content
    <br /> More content than we had before so this column is now quite tall.</div>
  <div class="box footer">Footer</div>
</div>