Want to align a dropdown to the right end using css grid
I am learning to use css grid. I want to align a responsive drop down to the right using css grid. I am aware that there would be many ways to get this simple requirement done, but I want to get it done using css grid. I have taken the dropdown code from bootstrap for quick work. Code is below. the dropdown is not aligned to the right extreme. Please help.
/* #mydiv ul{ text-align:right; }*/ /*#mydiv ul { list-style:none;}*/ #mydiv { grid-column-start: 250; grid-column-end:300; }<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <div class = "container" id="mydiv"> <ul> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle dropdown-menu-right" href="#" id="mydiv" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
You have an extra mydiv id on your dropdown link, you should remove it (removed in my example). Otherwise it may mess you up later.
Also, to have more control over where the dropdown appears, you can use columns in the grid and tell the rendering engine which column to place yur element in.
justify-self:end will tell the element to stick to the right edge of the column.
However, this makes the dropdown to be cropped onn the right edge, so you may need to play around with it.
#mydiv { display: grid; justify-content: end; grid-template-columns: 70% 30% } #mydiv ul { grid-column-start: 2; grid-column-end: 2; justify-self: end; }<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <div class = "container" id="mydiv"> <ul> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle dropdown-menu-right" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
If you are going to use grid then you need to add that property. Very basic example what may help you is this:
#mydiv { display: grid; justify-content: end; //your old properties grid-column-start: 250; grid-column-end:300; } Anyway taking into account that for grid it is better to specify rows/cols.
