Problem with CSS grid, responsive design not working-CodePudding

This is my CSS code: I have grid class with all the necessary parameters for responsive design and HTML code that has six elements in it, it should break lines and send blocks below each other on low screen resolution

/* grid test */
.angry-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   /*grid-template-rows: 1fr 1fr 1fr;*/
   grid-gap: 25px;
   align-items: flex-start;
   grid-auto-flow: column;
   grid-auto-rows: auto;
}

  
#item-0 {
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 2;
   grid-column-end: 2;
}
#item-1 {
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 2;
   grid-column-end: 3;
}
#item-2 {
   grid-row-start: 1;
   grid-column-start: 3;
   grid-row-end: 2;
   grid-column-end: 4;
}
#item-3 {
   grid-row-start: 1;
   grid-column-start: 4;
   grid-row-end: 2;
   grid-column-end: 5;
}
#item-4 {
   grid-row-start: 2;
   grid-column-start: 1;
   grid-row-end: 3;
   grid-column-end: 4;
}
#item-5 { 
   grid-row-start: 2;
   grid-column-start: 4;
   grid-row-end: 3;
   grid-column-end: 5;
}

<div >
  <div id="item-0">
    1
  </div>
  <div id="item-1">
    2
  </div>
  <div id="item-2">
    3
  </div>
  <div id="item-3">
    4
  </div>
  <div id="item-4">
    5
  </div>
  <div id="item-5">
    6
  </div>
</div>

As you can see the template is not responsive at all, when the screen is low resolution.

CodePudding user response：

The problem is that you want to have items to wrap, but in the same time you are specifying for each items where it is supposed to be in grid with your:

#item-1 {
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 2;
   grid-column-end: 3;
}

And it also not working to end item-0 at column 2 and start item-1 at column 2 because it means that they would be in same column.

So I remove all your css from each item and it works fine for the wrapping. After you want have some items starting in row 2, you would need to specify it. I would also suggest you to use media queries.

So now for screen below 725px you will see only 1 column.

DEMO

/* grid test */
.angry-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   grid-gap: 25px;
   align-items: flex-start;
   grid-auto-flow: row;
   grid-auto-rows: auto;
}

  
/*#item-0 {
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 2;
   grid-column-end: 2;
}
#item-1 {
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 2;
   grid-column-end: 3;
}
#item-2 {
   grid-row-start: 1;
   grid-column-start: 3;
   grid-row-end: 2;
   grid-column-end: 4;
}
#item-3 {
   grid-row-start: 1;
   grid-column-start: 4;
   grid-row-end: 2;
   grid-column-end: 5;
}
#item-4 {
   grid-row-start: 2;
   grid-column-start: 1;
   grid-row-end: 3;
   grid-column-end: 4;
}
#item-5 { 
   grid-row-start: 2;
   grid-column-start: 4;
   grid-row-end: 3;
   grid-column-end: 5;
}*/

<div >
  <div id="item-0">
    1
  </div>
  <div id="item-1">
    2
  </div>
  <div id="item-2">
    3
  </div>
  <div id="item-3">
    4
  </div>
  <div id="item-4">
    5
  </div>
  <div id="item-5">
    6
  </div>
</div>

CodePudding user response：

You want your items to "wrap" when the screen get smaller, this can be achieved with Flex Boxes or Grid layout, but first :

Don't use so much ID's Read this : Reasons not to use IDs in CSS
Don't explicitly define in which cells the items should be placed if you want them to be "responsive/flexible" otherwise you'll have to use @media queries

.angry-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   grid-gap: 25px;
}

.angry-grid div{
  background-color: BlanchedAlmond;
  height: 50px;
}

.angry-grid div:nth-child(even){
  background-color: burlywood;
}

.angry-flex{
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}
.angry-flex div{
  min-width: 150px;
}
.angry-flex div{
  background-color: BlanchedAlmond;
  height: 50px;
}

.angry-flex div:nth-child(even){
  background-color: burlywood;
}

<h1>Grid Layout</h1>
<div >
    <div >
1
    </div>
    <div >
2
    </div>
    <div >
3
    </div>
    <div >
4
    </div>
    <div >
5
    </div>
    <div >
6
    </div>
  </div>
  
 <h1>Flex Box</h1>
  
  <div >
    <div >
1
    </div>
    <div >
2
    </div>
    <div >
3
    </div>
    <div >
4
    </div>
    <div >
5
    </div>
    <div >
6
    </div>
  </div>