GRID - DIV dentro de outra DIV

[marcelobbt 7]

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>

 

 

 

[Maujor 144]

@marcelobbt
Oi Marcelo,
O seu HTML/CSS para grid layout, infelizmente não faz sentido.
Aconselho ler alguns artigos sobre GRID LAYOUT.
Aqui está um bom começo

[marcelobbt 7]

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

[Maujor 144]

@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!
 

[marcelobbt 7]

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.

 

 

[Thalles Rangel 0]

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;
}

 

[Maujor 144]

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.

[Thalles Rangel 0]

@marcelobbt 

Aconselho a utilizar Bootstrap v4 e ir utilizando a grid (alto nível de  responsividade).

https://getbootstrap.com.br/docs/4.0/layout/grid/

@Maujor  Obrigado por compartilhar seu conhecimento, aprendi muito com você, e  continuo aprendendo. Acredito que o Sr. é referência em css no Brasil. 

 

 

[Jack Oliveira 1]

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

 

Espero que tenha entendido ai o que eu quero

[Maujor 144]

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.

[Maujor 144]

@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 -->

 

 

[Jack Oliveira 1]

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 

:)