FORMATOS DE GRIDS
OLA PESSOAL ESTOU APANHANDO IGUAL PANDEIRO EM FORRO AQUI
ESTOU TENTANDO MONTAR UM SISTEMA PARA ELE APARECER EM FORMATA DE GRIDS E NÃO DE LSIT
SÓ QUE NÃO ESTOU CONSEGUINDO FAZER COM QUE ELE VENHA EM 3 COLUNAS E
POR EX:
ELE TEM QUE TER <------ 3 COLUNAS ASSIM ------------------->
| 1 TODAS VEZ QUE FOR FAZER UMA BUSCA NO SITE ELA SEMPRE MOSTRA AS PESQUISA EM GRID
| 2
| 3
| 4
| 5
| 6 E AS OUTRAS ELAS FICAR ASSIM
| 7
| 8
| 9
| 10
| 11
| 12
ESTE É O CÓDIGO QUE ESTOU TENTANDO
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="img_wrapper_grid">
<div class="ribbon">
<span><?php echo $dados["vip"];?></span>
</div>
<!-- End tools i-->
<div class="img_container">
<a href="<?php echo $dados["url"];?>">
<img src="img/<?php echo $dados["imagem"];?>" title="Visualizar Pagina da <?php echo $dados["empresa"];?>" width="800" height="533" class="img-responsive" alt="SEM FOTO">
<div class="short_info">
<h3><?php echo $dados["empresa"];?></h3>
<em><?php echo $dados["categoria"];?></em>
<p>
<?php echo $dados["frase"];?>
</p>
<div class="score_wp">Visitas:
<div id="score_1" class="score" data-value="<?php echo $dados["total"];?>"></div>
</div>
</div>
</a>
</div>
</div>
<!-- End img_wrapper -->
</div>
</div>
<!--End row -->
</div>
<!--End strip -->
</div>
<!-- End col lg 9 -->
</div>
<!-- End Row-->
</div> </div> </div>
<!-- End container -->
<?php
}
?>
este seria o modelo da minha grids que eu quero que fica<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>Discussão (0)
Carregando comentários...