Использование CSS Grid с Position / Transform - PullRequest
Новая
       8

Использование CSS Grid с Position / Transform

0 голосов
/ 01 ноября 2018

Я пытаюсь объединить CSS-сетку с положением, чтобы моя страница эффективно адаптировалась к разным размерам экрана. Я думаю, что нужно иметь один дизайн сетки для мобильных устройств и один для настольных компьютеров, используя @media(screen-width).

Я бы хотел, чтобы блоки сетки управлялись сетками, а содержимое блоков сетки определялось позицией.

Теперь я понимаю, что сетка создаст воображаемый прямоугольник, основанный на столбцах и строках, и что, когда я использую положение, она будет привязана к одному углу блока сетки.

Вопрос

01 Где мое недопонимание этой концепции?

02 Есть ли лучшие способы сделать это?

Мой код: 

<!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>

Что я получаю. enter image description here

Что я хочу. enter image description here

1 Ответ

0 голосов
/ 01 ноября 2018

Будьте внимательны при позиционировании элемента. Когда вы применяете position:fixed;, он не будет уважать родительские контейнеры, он будет строго придерживаться вида области просмотра.

Возможно, вы можете попробовать с position:absolute; дочернему элементу и передать position:relative; его родительскому контейнеру, чтобы он был в его родительском контейнере 

<!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>
...