CODEWITHSUNDEEP
htmlcsscss-grid
aravinvafshe
aravinvafshe

Reputation: 287

css grid is not responsive

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;
  }
}

Upvotes: 5

Views: 9228

Answers (5)

designcoded
designcoded

Reputation: 55

._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>

Upvotes: -1

designcoded
designcoded

Reputation: 55

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

Upvotes: 3

designcoded
designcoded

Reputation: 55

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.

Upvotes: 1

Rian Tavares
Rian Tavares

Reputation: 147

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.

Upvotes: 4

Narek
Narek

Reputation: 263

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>

Upvotes: 1

Related Questions