Html - Css grid with ordering elements

AbdoRabah
September 19, 2023
142 views
0 votes
2 Answers

The instructions are when is screen < 600px I have the div’s order like this red, green, blue :

And when screen > 600px I want to achieve this result in the image below :

My code is :

body {
  background-color: white;
}

/* Add your CSS here */
[data-testid] {
  width: 100%;
  height: 100%;
  padding: 20px;
  color: white;
}

@media screen and (min-width: 600px) {
  .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  }
  
  [data-testid="red"], [data-testid="blue"] {
  grid-column: 1;
}
  
  [data-testid="green"] {
  grid-column: 2;
  grid-row: span 2;
}
}

<body>
  <div class="grid-container">
    <div data-testid="red" style="background-color: red;">Red</div>
    <div data-testid="green" style="background-color: green;">Green</div>
    <div data-testid="blue" style="background-color: blue;">Blue</div>
  </div>
</body>

but I’m getting this problem as in the image :

How can I fix it to achieve the result I want?

Answers

The problem is the padding.

This is creating items with width 100% (of the grid cell) plus 2*20px.

This snippet makes the padding part of the width by setting box-sizing: border-box.

body {
  background-color: white;
}


/* Add your CSS here */

[data-testid] {
  width: 100%;
  height: 100%;
  padding: 20px;
  color: white;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  [data-testid="red"],
  [data-testid="blue"] {
    grid-column: 1;
  }
  [data-testid="green"] {
    grid-column: 2;
    grid-row: span 2;
  }
}

<body>
  <div class="grid-container">
    <div data-testid="red" style="background-color: red;">Red</div>
    <div data-testid="green" style="background-color: green;">Green</div>
    <div data-testid="blue" style="background-color: blue;">Blue</div>
  </div>
</body>

Personally I would use classes to target your grid items rather than targeting your data-testid for best code practice.

It looks like you have wrapped both outcomes into the same @media query, and the padding is being forced.

It should look a little something like this:

body {
  background-color: white;
}

.grid-container {
  height: 100%;
  width: 100%;
}

.box {
  padding: 20px;
  color: white;
}
  
.red,
.blue,
.green {
  grid-column: 1;
}

@media screen and (min-width: 600px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .green {
    grid-column: 2;
    grid-row: span 2;
  }
}

<body>
  <div class="grid-container">
    <div class="box red" data-testid="red" style="background-color: red;">Red</div>
    <div class="box green" data-testid="green" style="background-color: green;">Green</div>
    <div class="box blue" data-testid="blue" style="background-color: blue;">Blue</div>
  </div>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Css grid with ordering elements

Answers