CODEWITHSUNDEEP
cssresponsive-designgrid
nevaehteekay
nevaehteekay

Reputation: 57

Problem with CSS grid, responsive design not working

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 class="angry-grid">
  <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.

Upvotes: 0

Views: 1510

Answers (2)

MaxiGui
MaxiGui

Reputation: 6348

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 class="angry-grid">
  <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>

Upvotes: 1

maiakd
maiakd

Reputation: 160

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

  1. Don't use so much ID's Read this : Reasons not to use IDs in CSS
  2. 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 class="angry-grid">
    <div class="item-0">
1
    </div>
    <div class="item-1">
2
    </div>
    <div class="item-2">
3
    </div>
    <div class="item-3">
4
    </div>
    <div class="item-4">
5
    </div>
    <div class="item-5">
6
    </div>
  </div>
  
 <h1>Flex Box</h1>
  
  <div class="angry-flex">
    <div class="item-0">
1
    </div>
    <div class="item-1">
2
    </div>
    <div class="item-2">
3
    </div>
    <div class="item-3">
4
    </div>
    <div class="item-4">
5
    </div>
    <div class="item-5">
6
    </div>
  </div>

Upvotes: 1

Related Questions