CODEWITHSUNDEEP
htmljquerycss
JustinCase
JustinCase

Reputation: 21

How can I make this grid layout allow for more space on a longer name item?

Is there a way using display: grid that I can allow the item whose name is longer to have a larger section in the grid than the short items?

I would like the below navigation to all be on the same line and not have the longer name wrap to a second line. If anyone has a creative solution I am open to using javascript or jquery to achieve this if necessary.

.nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  text-align: center;
  padding: 2rem 1rem;
  list-style: none;
}
li a{
  text-decoration: none;
  color: black;
}
li a:hover {
  font-weight: 900;
}
<ul class="nav">
  <li><a href="">Item with a long name</a></li>
  <li><a href="">Name</a></li>
  <li><a href="">Name</a></li>
  <li><a href="">Name</a></li>
  <li><a href="">Name</a></li>
</ul>

Upvotes: 2

Views: 37

Answers (1)

Asmoth
Asmoth

Reputation: 563

You can use grid-template-columns: repeat(5, auto) instead of grid-template-columns: repeat(5, minmax(0, 1fr))

.nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, auto);
  text-align: center;
  padding: 2rem 1rem;
  list-style: none;
}
li a{
  text-decoration: none;
  color: black;
}
li a:hover {
  //font-weight: 900;
  text-shadow:1px 0px 0px black;
}
<ul class="nav">
  <li><a href="">Item with a long name</a></li>
  <li><a href="">Name</a></li>
  <li><a href="">Name</a></li>
  <li><a href="">Name</a></li>
  <li><a href="">Name</a></li>
</ul>

Upvotes: 1

Related Questions