Css grid - div w gridzie szerszy niż grid

Question

Czesc

Mam następujący problem:

Mam div container o width 1800px; i display:grid;

Chce dać do tego containera <section> które będzie miało width:100vw;

i problem polega na tym że ten section ma 100vw ale ustawia sie tak jakby początek miał tam gdzie div.container mimo że nie dalem mu grid-column-start:1;

Co moge zrobić?

Gdy dam position absolut i left:0 to działa no tylko że ja nie chce position absolut.

Dzieki za każdą odpowiedź

Answer 1

Rozwiązaniem problemu może być użycie pozycji absolutnej w CSS'ie.

<div class="rodzic">
  <div class="dziecko">
    
  </div>
</div>

css:
.rodzic{
  position: relative;
}

.dziecko{
  position: absolute;
  width: 100vw;
  top: 0;
  left: 0;
}

 

tylko wtedy jest troszke kłopotów z zachowaniem odpowiedniej wysokości tego elementu, bo rodzic się "zapada" i dziecko najedzie na zawartość strony poniżej, więc musisz tez opracować mechanizm ustalania wysokości rodzica , albo nadac mu wysokość na sztywno jeśli dziecko będzie też miało niezmienną wysokość

Answer 2

Czemu chcesz mieć w gridzie element, który wystaje poza grid? Po prostu nie wsadzaj go do gridu

Comments

No ok ale jak mam to zrobić żeby ten element nie był w gridzie ale był jakby miedzy elementami grida ? tzn on jest na srodku strony mniej  więcej.