Jump to content
b2black

Sistema de grid básico para imagem e descrição com pop up, como se fosse catalago

Recommended Posts

Alguém pode da uma ajuda para desenvolver um grid conforme a imagem, de 3 colunas e 6 items em cada coluna com pop up? Que seja responsivo?

 

Tipo o anexo no topico, onde o oloca verde fica a imagem e a descrição alinhada a direita, e ao clicar no item, abre uma janela onde posso mostrar mais informações?

 

 

 

 

Sem título.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

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

    • By 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>  
       
       
    • By 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?
       
       
    • By JoaoVituBR
      Olá, Gostaria de saber como eu poderia fazer para que o grid com uma linha que contem uma imagem maior posse comportar duas menores a sua frente!
      Exemplo de como está:
      <--AUMENTOU A DIV!
      Exemplo de como eu gostaria que ficasse:

      Codigo Usado: (Bootstrap)
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.