Arquivado
Este tópico foi arquivado e está fechado para novas respostas.
[Resolvido] Sistema de grid básico para imagem e descrição com pop up, como se fosse catalago
Por
b2black, em Desenvolvimento frontend
Recommended Posts
-
Conteúdo Similar
-
Por Sapinn
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 ?
-
.thumb.jpg.62d3082d00f160528d91e0723e7168ad.jpg)
Por Sherlock02
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!
-
-
Por marcelobbt
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>
-
Por MARI SANTOS
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?
-