Hello I'm trying to make my page fill the space when my navbar collapses in mobile view but it seems to leave the space empty(Instead of the images beside it filling up). The navbar also tends to push the items downwards.I initially used bootstraps grid but switched to css grid(thought this was the problem). Any suggestions will help thanks.
my code:
.wrapper {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: auto;
grid-auto-flow: row;
}
.mens {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}
.bars {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 1;
}
.pics {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=320" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<title>gridstest</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="mens border border-primary m-2">
<nav class="nav-navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand p-1 fw-bolder " href="#"> BRAND</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-column m-1">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">OPTION X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPTION X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPTION X/a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPTION X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPTION X</a>
</li>
</li>
</ul>
</div>
</nav>
</div>
<div class="bars border border-secondary m-2">
<div class="d-flex p-2 bd-highlight ">
<a class="navbar-link text-dark ms-auto p-2" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20"
height="20" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg></a>
<a class="navbar-link p-2 text-dark" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
</svg></a>
<a class="navbar-link p-2 text-dark" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
<path
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
</svg></a>
</div>
</div>
<div class="pics border border-danger border-3 m-2">
<div class="row">
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left ">
<button type="button" class="btn btn-success btn-lg">Buy</button>
</div>
</a>
</div>
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left">
<button type="button" class="btn btn-success btn-lg">Buy now</button>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left">
<button type="button" class="btn btn-success btn-lg">Buy now</button>
</div>
</a>
</div>
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left">
<button type="button" class="btn btn-success btn-lg">Buy now</button>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left">
<button type="button" class="btn btn-success btn-lg">Buy now</button>
</div>
</a>
</div>
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left">
<button type="button" class="btn btn-success btn-lg">Buy now</button>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left">
<button type="button" class="btn btn-success btn-lg">Buy now</button>
</div>
</a>
</div>
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left">
<button type="button" class="btn btn-success btn-lg">Buy now</button>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left">
<button type="button" class="btn btn-success btn-lg">Buy now</button>
</div>
</a>
</div>
<div class="col-6 relate">
<a class="ripple" href="#"><img class="img-fluid shadow" src="https://via.placeholder.com/3648.jpg">
<div class="bottom-left">
<button type="button" class="btn btn-success btn-lg">Buy now</button>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
</script>
</body>
</html> The image:
