Jump to content
marcelobbt

GRID - DIV dentro de outra DIV

Recommended Posts

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>

 

 

 

Share this post


Link to post
Share on other sites

Parece não fazer sentido pois usei parte do meu código e coloquei um exemplo simplificado apenas para tentar exemplificar o meu problema.

Share this post


Link to post
Share on other sites

@marcelobbt
Você declara um GRID de 5 colunas.
Posiciona o div principal em 2/5 e ele ocupa a segunda terceira e quarta colunas da 1a. linha.
Omite o posicionamento de col 1 e por padrão ele vai ocupar a quinta coluna da 1a. linha.
Omite o posicionamento de col 2 e por padrão ele vai ocupar a primeira coluna da 2a. linha com seus elementos
filhos.
Posiciona esquerda e direita nas linhas 1 / 5 quando só existem duas linhas no seu GRID!
O código do seu GRID não faz sentido!
 

Share this post


Link to post
Share on other sites

Como falei, peguei apenas parte do código.

Tem duas colunas, uma em cada lateral. Apenas não indiquei no html. De qualquer forma o link que você passou já me deu a dica de como fazer. Obrigado e desculpa se compliquei a coisa.

 

O que precisava era tratar a classe "col2" como um grid ("display: grid;") assim como o container, aí vai atender ao que eu quero.

 

 

Share this post


Link to post
Share on other sites

usa float:left (uma div ficará do lado da outra)

O float:left; vai em um dos dois, testa.
.gridcontainer {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 3fr 3fr 3fr 1fr;  
  grid-gap: 3px;
//float:lef;
}
.gridcontainer > div {
  /*text-align: center;*/
  padding: 10px;
  /*font-size: 20px;*/
//float:left;
}

 

Share this post


Link to post
Share on other sites

A propriedade CSS float pode causar efeitos indesejados nos grid items.
https://www.w3.org/TR/css-grid-1/#grid-containers

Como regra geral: não use floats em grid layouts.
Em um grid layout bem projetado não há necessidade de floats.

Share this post


Link to post
Share on other sites

Ola @Thalles Rangel @Maujor

 

Bom quero aqui aproveitar este post aqui

 

Quero montar o GRID

se eu fazer ele em 4 em 4 ele fica

Quando ele forma as 2 e fazer outra ficar apenas maior preenchendo os espaço das outras 3 coluna 

Ex: htm5

				<div class="row">
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 1</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 2</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 3</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 4</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
					<div class="col-md-8">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 5</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
				</div>

No meu php montei assim

GRID funciona mais não do jeito que esta do produto 5

 

				<div class="row">
 	<?php 
    while($dados = mysqli_fetch_assoc($resultado)){ 
	$id = $dados['id'];
	$titulo = $dados['titulo'];
	$imagem = $dados['imagem'];
    $visitas = $dados['visitas'];
	?>                 
                  
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/<?php echo $imagem; ?>);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3><?php echo $titulo; ?></h3> <!-- TITULO -->
								<h6>Visitas: <?php echo $visitas; ?></h6> <!-- VISITAS -->
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
                    <!-- AQUI NO COL-MD-8 
QUERO QUE ELE APAREÇA QUANDO O GRID NÃO ESTIVER COMPLETO EM SUAS COL-MD4 COL-SM-6 -->
					<div class="col-md-8">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/<?php echo $imagem; ?>);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3><?php echo $titulo; ?></h3> <!-- TITULO -->
								<h6>Visitas: <?php echo $visitas; ?></h6> <!-- VISITAS -->
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>                  
                  <?php } ?>
</div> <!-- ROW -->

 

Fazer igual da imagem ai

 

grid.jpg

Espero que tenha entendido ai o que eu quero

Share this post


Link to post
Share on other sites

Antes de sugerir a solução considere o seguinte:
Se você quer uma linha completa com três "slots" e o número total de imóveis a mostrar é indeterminado temos as seguintes situações:

  1. 1 imóvel => em uma linha de 3 slots;
  2. 2 imóveis => em uma linha, um em 1 slot e outro em 2slots;
  3. 3 imóveis => em uma linha, cada imóvel em um slot;
  4. 4 imóveis => em duas linhas, a segunda com o imóvel em 3 slots; 
  5. 5 imóveis => em duas linhas, a segunda linha com 1slot + 2slots (é o caso da figura que você postou)
  6. A partir daqui segue o mesmo padrão

    Informe se é isso.

Share this post


Link to post
Share on other sites

@Jack Oliveira

Fiz alguns testes com seu código e:
Não é uma boa ideia ajustar uma linha que não contenha 3 imóveis conforme você pretende e mostrou na figura, pois a imagem do imóvel será parcialmente mostrada e não há como corrigir isso.
Observe que na sua figura a última imagem (Com piscina) mostra apenas a parte superior da foto. E, quanto maior a tela do usuário tanto menor a faixa superior a ser mostrada.

A melhor solução é deixar que os imóveis ocupem sua área de apresentação sem completar a última linha.
Eis o código para isso:
 

<div class="container">
  <div class="row">
<?php
while ($row = $result->fetch_assoc()) {
?>
    <div class="col-md-4">
      <a href="#" class="exp-img" style="min-height: 200px;display: block;background-image: url(<?php echo $row['imagem']; ?>);background-size: 350px 200px;">
        <span class="filter"></span>
        <div class="img-info">
          <h3><?php echo $row['titulo'] ?></h3> <!-- TITULO -->
          <h6><?php echo 'Visitas: ' . $row['visitas']; ?></h6> <!-- VISITAS -->
          <span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
        </div>
      </a>
    </div>
<?php } ?>
  </div> <!-- /.row -->
</div> <!-- /.container -->



 

 

Share this post


Link to post
Share on other sites
Em 13/04/2019 at 15:21, Maujor disse:

@Jack Oliveira

Fiz alguns testes com seu código e:
Não é uma boa ideia ajustar uma linha que não contenha 3 imóveis conforme você pretende e mostrou na figura, pois a imagem do imóvel será parcialmente mostrada e não há como corrigir isso.
Observe que na sua figura a última imagem (Com piscina) mostra apenas a parte superior da foto. E, quanto maior a tela do usuário tanto menor a faixa superior a ser mostrada.

A melhor solução é deixar que os imóveis ocupem sua área de apresentação sem completar a última linha.
Eis o código para isso:
 


<div class="container">
  <div class="row">
<?php
while ($row = $result->fetch_assoc()) {
?>
    <div class="col-md-4">
      <a href="#" class="exp-img" style="min-height: 200px;display: block;background-image: url(<?php echo $row['imagem']; ?>);background-size: 350px 200px;">
        <span class="filter"></span>
        <div class="img-info">
          <h3><?php echo $row['titulo'] ?></h3> <!-- TITULO -->
          <h6><?php echo 'Visitas: ' . $row['visitas']; ?></h6> <!-- VISITAS -->
          <span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
        </div>
      </a>
    </div>
<?php } ?>
  </div> <!-- /.row -->
</div> <!-- /.container -->



 

 

Boa tarde @Maujor Entende 

Obrigado pelo conselho e bom sempre aprender e seguir conselhos e ideias 

:)

 

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 Mewmew
      Bom dia!
       Teria como alguém me ajudar? 
      Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo...
       
       Preciso criar um contêiner dentro de outro contêiner igual a imagem 1.
       
      Só que ele está ficando igual a imagem 2.
       
       Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. 
      Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente! 
       



    • By leandro32
      Senhores, me ajudem pelo amor de Deus!!!
      Estou montando uma "Base de Documentos" onde eu trabalho. Essa base é dividida por tipo de Documento (CNH/RG/OUTROS) e ano de expedição (2019/2018/2017...). As máscaras principais (HOME's) já foram feitas, o problema é que não consigo vincular esses botões dos anos em DIV's diferentes.
      Alguém, em nome de Jesus Cristo, me ajuda a criar uma regra que, ao clicar no ano 2018,  doc aparece na DIV ao lado com a barra de ZOOM??? Porque eu já estou ficando louco!!!
       
                                                                          <!-- CÓDIGO DO SITE -->
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="estilo.css" />
         
                                                    <title>ACRE - RG</title>
      </head>

      <body>
                          <!-- CABEÇALHO COM MENUS -->
      <header>
      <div class="container">
          <div class="zoom">
              <img src="logo.png" class="img-responsive" height="95px" width="130px" border="2px">
          
                <div id="menu">
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/Base%20Documental.html">HOME</a>
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/RG.html">RG</a>
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/CNH.html">CNH</a>
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/OUTROS.html">OUTROS</a>
                </div>
          </div>
      </div>
      </header>
       
          <!-- O CORPO DO SITE -->
      <div class="container2">
      <fieldset>
      <center><h2><i> Estado do ACRE - RG</i></h2></center>
      </fieldset>
      </div>

      <div class="container3">
                                                 <!-- COLUNA DOS ANOS -->

        <div class="container4">
           <div class="col-lg-2 col-md-2 col-sm-2">
             <div style="height: calc(100vh - 230px); overflow-y: scroll; overflow-x: hidden; right: 16px">
               <div class="btn-group-vertical" role="group" aria-label="..."
                   <div class="zoom">

                          <button class="btn ng-scope btn-default" ng-class="{'btn-primary': analyser.selectedDocModel.guid === docModel.guid, 'btn-default': analyser.selectedDocModel.guid !== docModel.guid}" ng-repeat="docModel in analyser.filteredDocModels" ng-click="analyser.selectDocModel(docModel)" ng-show-img="areaimagem" style="-webkit-user-drag: none" class="ng-scope" img src="AM.01.jpg" class="img-responsive" href="AM.01.jpg" size="80%">
                                              <small class="ng-binding">RG</small>
                                              <br>
                                              <small class="ng-binding">AM- 2019</small>
                                          </button>
                         
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
       

          <!-- O RODAPÉ Do SITE -->

      <footer>
              <span> <b>BASE DOCUMENTAL</b> - &copy;<i>Leandro do Nascimento Martins</i></span>
      </footer>
      </div>
      </div>
      </div>
           
      </body>
      </html>
       
       
       
                                                                             <!-- ARQUIVO ESTILO.CSS -->
      /* PADRÃO CSS */

      /* eliminando configurações dos browsers*/
      * {margin: 0;    padding: 0;    font-family: verdana, helvetica, arial;}

      /* TODAS AS TAG's DECLARADAS */ /* PARA UMA "TAG - PARTE" NORMAL, USA-SE APENAS O NOME */
      p {color: silver;    font-size: 15px;    text-align: center;    font-family: arial, "Times new roman";    text-shadow: 1px 1px 1px #111111;}

      body {background-color: #E8E8E8;    width: 100%;}

      header {background-color: #08298A;    height: 100px;    padding: 2px;    width: 100%;}

      footer   {clear: both;    color: white;    background-color: #08298A;    height: 40px;    text-align: center ;    padding: 10px;    text-shadow: 1px 1px 1px black;}

      h1 {color: SILVER;    text-align: center;    margin: 0 0 50px 0;    text-shadow: 2px 2px 2px #111111;}
      h2 {color: SILVER;    text-align: center;    margin: 5px 0 5px 0;    text-shadow: 2px 2px 2px #111111;}
       
      /* TODAS AS  ID's */    /* PARA "IDENTIFICAÇÃO - ID" DA DIV USA-SE  .#. HASHTAG  */
      #div_principal {background-color: white;    clear: both;    background-size: 65%;    min-height: 485px;    padding: 40px 0 40px 0;    margin: 1% 1% 1% 1%;    width: 100%;}
      #logo {float: left;    margin: 0 20px 0 10px;}
      #menu {float: right;    margin-top: 40px;    text-transform: uppercase;}
      #menu a {padding: 32px 20px;    text-decoration: none;    color: white;    border-radius: 20px;    border-top-right-radius: 20px;    border-bottom-left-radius: 20px;    cursor: pointer;    transition: background-color 1s;}
      #menu a:hover {background-color: white;    color: black;}
      #btn-default {text-decoration: none;}

      /* CLASS */ /* PARA CLASSES-CONTAINER's DIFERENTES USA-SE O PONTO  .  */
      .efeito {background-color: rgba(0, 0, 0, 0.3);    padding: 100px 0 100px 0;}
      .container {width: 100%; /* largura */    margin: auto; /* ajuste automatico independente de resolução*/}

      .container2 {width: 97%; /* largura */    margin: auto; /* ajuste automatico independente de resolução*/    background-color: white;}
      .container3 {width: 95%;    margin: auto;    background-color: #FFFAFA;    clear: both;}
      .container4 {width: 10%;    float: left;    background-color: #FFFAFA;    clear: both; }
      .container5 {background-color: ;     float: left;}
      .col-lg-2 {width: 95%; }
      .col-md-2 {width: 50px;}
      .col-sm-2  { width: 79px;}
      .col-lg-10  { width: 80%; }

    • By s3c0
      Amigo, estou com um probleminha e não consigo resolver...
       
      já revirei a internet inteira, mas não encontrei nada parecido com o que preciso.
       
      A questão é o seguinte. Queria executar um comando JS assim que uma div aparecer na tela.
       
      Abaixo estou deixando os codes
       
      <script src="js/jquery.min.js" type="text/javascript"></script> <style> #progress { width:100%; height:20px; border: solid #808080 2px; border-radius: 5px; background-image: linear-gradient( 90deg, green, yellow, red ); } #processador{ width: 0%; height: 16px; background-color: rgba(0, 0, 0, 0.5); } #memoria{ width: 0%; height: 16px; background-color: rgba(0, 0, 0, 0.5); } #hd{ width: 0%; height: 16px; background-color: rgba(0, 0, 0, 0.5); } </style> Processador <span data-bind="Usage"><div id="progress"><div id="processador"></div></div><div style="text-align:right;">20%</div></span> Memória <span data-bind="Usage"><div id="progress"><div id="memoria"></div></div><div style="text-align:right;">50%</div></span> Hard Disk <span data-bind="Usage"><div id="progress"><div id="hd"></div></div><div style="text-align:right;">80%</div></span>  
       
      JS
       
      <script type="text/javascript"> $("#processador").html(function(){ alert("ok"); var width = 1; var id = setInterval(frame, 10); var id2 = setInterval(frame2, 10); var id3 = setInterval(frame3, 10); function frame() { if (width >= 20) { clearInterval(id); } else { width++; document.getElementById("processador").style.width = width + '%'; } } function frame2() { if (width >= 50) { clearInterval(id2); } else { width++; document.getElementById("memoria").style.width = width + '%'; } } function frame3() { if (width >= 80) { clearInterval(id3); } else { width++; document.getElementById("hd").style.width = width + '%'; } } }); </script>  
      A "animação" em si, está funcionando perfeitamente, porém ao carregar a página e não no momento em que a DIV aparece na tela
    • By Maikson
      Olá pessoal, sou novo em javascript e Jquery, podem me ajudar com o seguinte problema?
      Tenho um select com algumas opções.
      Umas dessas opções possui o valor "outro".
      Quando o usuário selecionar esta opção, preciso que apareça um campo de texto para que ele especifique e um botão "+"
      Ao preencher o campo e clicar em "+" O valor precisa ser inserido no select como uma nova option e selected.

      Segue o código:
       
      <!DOCTYPE html> <html lang="pt-Br"> <head> <meta charset="UTF-8"> <title>Select com opção de novo valor</title> <script> // Toda vez que uma opção for selecionada, teste se é "outro" // Se for, mostre o campo para que o usuário informe o novo valor // O novo valor deve ser enviado ao servidor como se fosse uma option selected neste select </script> </head> <body> <select name="grupo" id="gruposSelect" onchange="novoValor(gruposSelect, divOculta);"> <option value="">Todos</option> // Código PHP que gera opções <option value="outro">Outro</option> </select> <div id="divOculta" style="display:none;"> <input type="text" name="grupo" id="novoGrupo" /> </div> </body> </html>

      Desculpem se eu estiver violando alguma regra ou falta de clareza, este é o primeiro fórum que participo e meu primeiro post
      Obrigado
       
    • By rossgellen
      Boa noite pessoal, preciso fazer com que seja carregado somente a informação dentro de uma determinada div, pois ela deve atualizar quando for alterada a informação no BD. Carregar a pagina inteira a cada 5 segundos seria ruim pois provavelmente o usuário estranharia, fiz da seguinte forma, conforme os prints.
       
      Deu certo, porém a informação foi alterada a partir da alteração feita no banco de dados, porém, dentro da div, apareceu outra página igual, gerando duplicidade sobreposta.
      Aguardo sugestões.

      nox

×

Important Information

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