I recently switched to Grid and there are aspects that got complicated.
In the scheme I was working with I included a title H2
, sometimes a H3
and then a line break <br>
and floated the Items to the left.
I have now migrated to:
wrapper {display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 30px;}
And it goes a long way, it has really saved me time to arrange the "boxes".
But how can I propose this interface so that the H2 become titles that occupy all the horizontal space, then a line break and H3 as a sub title that occupies all the horizontal space, another line break and finally the 6 items
Right now everything is considered one more element of the grid, both h2, h3 and the items occupy free space next to each other.
echo '<div class="wrapper">';
if ($id_cate !== 0 && $result = $connection->query($sql)) {
$nombre_categoria = '';
$nombre_subcategoria = '';
$nombre_subnivelcategoria = '';
while ($myrow = $result->fetch_assoc()) {
if ($nombre_categoria !== $myrow['nombre_categoria']){
$nombre_categoria = $myrow['nombre_categoria'];
echo '<h2>Categoría</h2>';
}
if ($nombre_subcategoria !== $myrow['nombre_subcategoria']){
$nombre_subcategoria = $myrow['nombre_subcategoria'];
echo '<h3>Sub Categoría</h3>';
}
$id_prod = $myrow['id_prod'];
$precio = $myrow['precio'];
$nombre = $myrow['nombre'];
$fotoprod = $myrow['filech'];
echo '<div class="items">';
echo '<h4">';
echo '<a href="#">txt</a></h4>';
echo '<a href="#"><img/></a>';
echo '<h5>txt</h5>';
echo '</div>';
$cont++;
}
}
echo '</div>';
The HTML result is
<div class="wrapper">
<h2>Categoría Primera</h2>
<h3>Subcategoría</h3>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<h3>Subcategoría Dos</h3>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<h3>Subcategoría Tres</h3>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
<div class="item">
<h4>Título</h4>
<a href="#"><img/></a>
<h5>txt</h5>
</div>
</div>
You could use
grid-column-start
andgrid-column-end
which define the position and extent of an element within the grid container. In this case I want theh2
y 'sh3
to extend over all 6 columnsMaybe this is what you need.