Question 248530 in Html Question posted in
Some basic documentation can be found here.

Html – Css grid with ordering elements

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

enter image description here

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

result

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 :
my result

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search