Using CSS Grid with Position/transform

Question

I am trying to combine CSS grid with position in order to have my page effectively adjust to different screen sizes. My thinking is to have one grid design for mobile and one for desktop using @media(screen-width).

My thinking would be to have the grid blocks be driven by grids and have the content in the grid blocks be driven by position.

Now my understanding is that grid would create a imaginary rectangle based on the columns and rows and that when i use position that it would latch on to the one corner of the grid block.

Question

01 Where is my misunderstanding of this concept?

02 Are there better ways to do this?

My code:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Grid</title>
  <style>
    .wrapper_main {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-auto-rows: minmax(100px, auto);
      grid-gap: 1em;
      justify-items: stretch;
      align-items: stretch;
    }
    
    .box0 {
      grid-column: 1/6;
      grid-row: 1;
      border: 1px solid #333;
    }
    
    .box1 {
      grid-column: 1/6;
      grid-row: 2/6;
      border: 1px solid #333;
    }
    
    .seconds01 {
      position: fixed;
      right: 20px;
      top: 50px;
    }
    
    .seconds05 {
      position: fixed;
      right: 100px;
      top: 50px;
    }
  </style>
</head>

<body>
  <div class="wrapper_main">
    <div class="box box0">Box 0</div>
    <div class="box box1">
      <a class="seconds01"><img src="img/Candle_Box_Tag.png"></a>
      <a class="seconds05"><img src="img/Candle_Box_Tag.png"></a>
    </div>
  </div>
</body>

</html>

What i'm getting.

What i want.

May I ask you why should you want them in the sticky position why don't you try the absolute position? — Viira
– Viira, Commented Nov 1, 2018 at 9:31
Hi @BhargavChudasama i'm still learning where would one want to use grid and where would one want to use position — Deon
– Deon, Commented Nov 1, 2018 at 10:21

Viira · Accepted Answer · 2018-11-01 09:34:55Z

1

Be aware when you positioning the element. When you apply position:fixed; its won't respect it parent containers it will strictly stick to the viewport's view.

Perhaps you can try with position:absolute; to the child element and give position:relative; to its parent container so that it will be in its parent container

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Grid</title>
  <style>
  .wrapper_main{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    grid-auto-rows:minmax(100px, auto);
    grid-gap:1em;
    justify-items:stretch;
    align-items:stretch;
  }
  .box0{
    grid-column:1/6;
    grid-row:1;
    border:1px solid #333;
  }

  .box1{
    grid-column:1/6;
    grid-row:2/6;
    border:1px solid #333;
    position:relative;
  }
  .seconds01{
       position:absolute;
       right:20px;
       top:50px;
  }

  .seconds05{
     position:absolute;
       right:100px;
       top:50px;
  }
  </style>
</head>
<body>
  <div class="wrapper_main">
    <div class="box box0">Box 0</div>
    <div class="box box1">
        <a class="seconds01"><img src="img/Candle_Box_Tag.png"></a>
        <a class="seconds05"><img src="img/Candle_Box_Tag.png"></a>
    </div>
  </div>
</body>
</html>

answered Nov 1, 2018 at 9:34

Viira

4,0163 gold badges20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deon Over a year ago

Hi Viira thanks for showing this out to me I'm currently juggling work and learning html, css and java script. I will go reread about this I think I misunderstood position:fixed, position:absolute; position:relative;

Collectives™ on Stack Overflow

Using CSS Grid with Position/transform

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related