Opa galera tudo beleza? Então criei um layout de um dashboard com css grid e eu gostaria de fixar o menu lateral na esquerda e a barra que está em cima e quando eu rolasse para baixo a unica coisa que mexesse fosse o conteúdo da direita. Já tentei usar o position fixed mas ele quebra a página, tentei usar o position: sticky mas ele não funciona. Alguém sabe como resolver isso ?

Olá!
 
Eu estou tentando fazer um layout de postagem em que o primeiro ocupa a largura de 100%. Os demais são dispostos em grid, dois posts.
(Vou anexar uma imagem para exemplificar o que desejo).
 
Segue o código:
.post:first-child{width:100%;position:relative;} .post{margin-bottom:60px;width:48.8%;float:left;background:#eee} .post:nth-child(2n+2){margin-right:30px;}  
<div  id='mainwrapper'> <div class="post">   <div class="post-entry">        1 Post com width 100%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        2. Post com width 48%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        3. Post com width 48%. Here goes my post.   </div> </div>   </div><!-- mainwrapper--> Esse código que fiz não me satisfez por completo porque o post da direita não "gruda" no canto, então está ficando desigual o primeiro e os demais.
 
Eu gostaria de saber se não existe uma forma mais prática de fazer esse código.
Obrigada!

quero gravar essa tela de cadastro inserindo 1 ou mais ocorrencias

Estava tentando criar um leiaute com o formato GRID, mas me deparei com um problema. Não consigo colocar DIV dentro de uma DIV do leiaute do GRID.
 
Queria saber como faço isso. Abaixo segue exemplo onde no div "col2" queria colocar duas div, uma do lado da outra:
 
CSS
.gridcontainer { display: grid; justify-content: center; grid-template-columns: 1fr 3fr 3fr 3fr 1fr; grid-gap: 3px; } .gridcontainer > div { /*text-align: center;*/ padding: 10px; /*font-size: 20px;*/ } .esquerda { grid-row: 1 / 5; } .direita { grid-row: 1 / 5; grid-column: 5 / 5; } .principal { grid-column: 2 / 5; background-color: #ffffff; padding-left: 10px; } HTML
<div class="gridcontainer"> <div class="principal"> <p>texto</p> </div> <div class="col1"> <p>texto</p> </div> <div class="col2"> <div class="esquerda"> <img src="..."> <p>Imagem legenda</p> </div> <div class="direita"> <p>Texto</p> </div> </div> </div>  
 
 

Boa tarde, 
 
Eu criei um container como o grid, e adicionei os grids filhos, dentro desses grids filhos adicionei algumas divs, até ai tudo fica perfeito, porém quando vou adicionar algum elemento dentro dele, como foto ou texto, ele se expande.
Esse comportamento é normal?