0

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.

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
nevaehteekay
  • 47
  • 8

2 Answers2

1

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>
maiakd
  • 160
  • 9
  • .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; grid-template-areas: 'one two three four' 'five five five six'; } .one { grid-area: one; } .two { grid-area: two; } .three { grid-area: three; } .four { grid-area: four; } .five { grid-area: five; } .six { grid-area: six; } – nevaehteekay Apr 21 '22 at 08:18
  • I still have the same issue, I think it is impossible to achieve without media queries, I want to have four blocks on top and two blocks on bottom with first one on the bottom having space of three blocks – nevaehteekay Apr 21 '22 at 08:19
1

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>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33