css grid is not responsive

Question

I'm making a grid with 3 columns and 3 rows everything works fine but it's not responsive I tried to use media queries but it looks like this.

any solutions?

<div class="projectPhotos">
 <div class="_a p1">1</div>
 <div class="_a p2">2</div>
 <div class="_a p3">3</div>
 <div class="_a p4">4</div>
 <div class="_a p5">5</div>
 <div class="_a p6">6</div>
 <div class="_a p7">7</div>
</div>

._a{
  width:220px;
  height:120px;
  background:gray;
  border: 1px solid #fff;
  font-size: 30px;
  text-align: center;
  color:white;
  margin: auto;
}
.projectPhotos{
  display: grid;
  grid-template-columns: auto auto auto;
  box-sizing: border-box;
  grid-gap: 40px 60px;
  box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
  .projects{
    width:350px;
  }
  .projectPhotos{
    grid-gap:10px 10px;
  }
  .projectPhotos ._a{
    width:300px;
    height:100px;
  }
}

Smiga

Simply change grid-template-columns: auto auto auto; to grid-template-columns: reapeat(auto-fit,1fr); – Nautical

Answer 1

I suppose that when you use grid-template-columns: auto auto auto; this means that you'll always have a grid with 3 columns. What I suggest to make this responsive is just apply "grid-template-columns" into your media query like this, for example:

@media only screen and (max-width: 600px) {
 .projects{
   width:350px;
 }
 .projectPhotos{
   grid-template-columns: auto;
   grid-gap:10px 10px;
 }
 .projectPhotos ._a{
   width:300px;
   height:100px;
 }
}

This way you are setting that your grid will have only one column when the media query is true.

Workwoman

Please note, that grid-gap is obsolete: developer.mozilla.org/en-US/docs/Web/CSS/gap we should use gap instead. – Carrillo

Answer 2

hi you need to use this repeat(auto-fit, minmax(220px, 1fr)) in css grid in order to achieve responsiveness without media queries, if you use repeat(auto-fit, 1fr)) or repeat(auto-fit, auto) or repeat(auto-fit, minmax(auto, 1fr)) will act as an div block level elements and never allow other items (sibblings) to get placed next to them, so i highly recommend you to use repeat(auto-fit, minmax(width of the items , 1fr)) or repeat(0, minmax(220px, 1fr)) or repeat(auto-fit, minmax(220px, 1fr)) to force the grid items to give the space for its sibbling items to sit after them ,.

PLEASE DO SEE MY UPCOMMING ANSWER AFTER THIS FOR BETTER EXPLANATION

NOTE: 1FR WILL ACT LIKE AN BLOCK LEVEL ELEMENT , AUTO WILL COVER TILL THE CONTENT SIZE DECLARE THE WIDTH OF THE ITEMS INSIDE THE grid-template-columns or grid-auto-columns ONLY IN grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); OR grid-template-columns: repeat(auto-fit,220PX); ** NOT SEPERATELY DECLARE THE WIDTH OF THE ITEMS INSIDE THE grid-template-rows or grid-auto-rows

code sand box link https://codesandbox.io/s/fixed-solution-css-grid-is-not-responsive-8mdow?file=/style.css

Impact

Can you add an example of this, please? – Massasoit

i added dude design coded is me check my code for this , here my codesandbox too codesandbox.io/s/… – Impact

Good answer, but please, add the code sandbox to your answer. – Massasoit

codesandbox.io/s/… – Impact

Answer 3

You can set grid-template-columns to auto, so on each row will be one element.

._a{
  width:220px;
  height:120px;
  background:gray;
  border: 1px solid #fff;
  font-size: 30px;
  text-align: center;
  color: white;
  margin: auto;
}
.projectPhotos{
  display: grid;
  grid-template-columns: auto auto auto;
  box-sizing: border-box;
  grid-gap: 40px 60px;
  box-sizing: border-box;
}


@media only screen and (max-width: 600px) {
  .projects{
    width:350px;
  }
  .projectPhotos{
    grid-gap:10px 10px;
    grid-template-columns: auto;
  }
  .projectPhotos ._a{
    width:300px;
    height:100px;
  }
}

<div class="projectPhotos">
 <div class="_a p1">1</div>
 <div class="_a p2">2</div>
 <div class="_a p3">3</div>
 <div class="_a p4">4</div>
 <div class="_a p5">5</div>
 <div class="_a p6">6</div>
 <div class="_a p7">7</div>
</div>

Yasukoyataghan

Answer 4

css grid replaces the width with grid-template-columns and height with grid-template-rows

so, instead of using width:220px; use grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); or grid-template-columns: repeat(auto-fit, 220px);

Replace height height:120px; with this grid-auto-rows: 120px;,

So, try to understand the use case of css grid and replace the css properties according to the new feature of css.

Impact

Answer 5

._a {
  background: gray;
  border: 1px solid #fff;
  font-size: 30px;
  text-align: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.projectPhotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 120px;
  grid-gap: 40px 60px;
 }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="projectPhotos">
      <div class="_a p1">1</div>
      <div class="_a p2">2</div>
      <div class="_a p3">3</div>
      <div class="_a p4">4</div>
      <div class="_a p5">5</div>
      <div class="_a p6">6</div>
      <div class="_a p7">7</div>
    </div>
  </body>
</html>

Impact

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Nonoccurrence