Question 194842 in CSS Question posted in
Some basic documentation can be found here.

Css – Grid question: Why is the <ul> <li> items displaying in column 2 under each other? I want them to be next to each other. (product, about and follow)

Question relating to CSS Grid: I would like to have Fotomatic, Product detail, About us and Follow us to show in the same row, each in their own columns, but Product detail, About us and Follow us is displaying under each other in column number 2.

HTML

   <header>
    <div class="hcontent">
      <a class="fotomatic" href="index.html" class="desktop logo">Fotomatic</a>
      <nav class="desktop">
        <ul>
          <li ><a href="#" class="product">Product detail</a></li>
          <li ><a href="#" class="about">About us</a></li>
          <li ><a href="https://www.instagram.com/" class="follow">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
        </ul>
      </nav>
      <nav class="mobile">
        <ul>
          <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
    </div>
  </header>

CSS

.hcontent {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template-rows: 1fr;
  grid-template-columns: 70% 10% 10% 10%;
}

.fotomatic {
  grid-column: 1 / 2;
}

.product {
  grid-column: 2 / 3;
}

.about {
  grid-column: 3 / 4;
}

.follow {
  grid-column: 4 / 5;
}

.mobile {
  display: none;
}

.icon {
  width: 20px;
}

@media (max-width: 480px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }
}

I tried many things, but cannot figure it out. Is

  • items displaying in the same column because they are under a ? Am I looking at the Parent/Child relationship wrong?

    • Tags:

    2

    Answers


    1. 0

      <li>-elements are displayed vertically by default. To display them horizontally, add this (for example, there are more options) to your CSS:

      li {
display: inline;
}

      If you don’t want all <li>-elements to be displayed horizontally, use a class-name.

      To place elements in separate columns of a grid, they have to be at one level. Try changing your html to this:

      <header>
<div class="hcontent">
  <a class="fotomatic desktop logo" href="index.html">Fotomatic</a>
  <a class="desktop product" href="#">Product detail</a>
  <a class="desktop about" href="#">About us</a>
  <a class="desktop follow" href="https://www.instagram.com/">Follow us <img class="icon" src="./resources/images/instagram.png"></a>
  <a class="mobile" href="#"><img src="./resources/images/ic-logo.svg"></a>
  <a class="mobile" href="#"><img src="./resources/images/ic-product-detail.svg"></a>
  <a class="mobile" href="#"><img src="./resources/images/ic-about-us.svg"></a>
  <a class="mobile button" href="#">Join us</a>
</div>
      Login or Signup to reply.
    2. 0

      A grid container places each of its child containers into separate cells on the grid. In your example, <div class="hcontent"> has only three children:

      1. <a class="fotomatic">
      2. <nav class="desktop">
      3. <nav class="mobile">

      What you are trying to achieve is easier accomplished using Flexbox, as horizontal placement is the default with no need to define grid track sizes. The "hcontent" container and "desktop" ul should both be display: flex. Just as with Grid, only direct children are positioned with Flexbox.

      .hcontent {
  display: flex;
  height: 200px;
}

.fotomatic {
  margin-inline-end: auto;
}

.desktop ul {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 1em;
  align-items: center;
  list-style-type: none;
}

.icon {
  width: 20px;
}

.mobile {
  display: none;
}

@media (max-width: 480px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }
}
      <header>
  <div class="hcontent">
    <a class="fotomatic" href="index.html" class="desktop logo">Fotomatic</a>
    <nav class="desktop">
      <ul>
        <li ><a href="#" class="product">Product detail</a></li>
        <li ><a href="#" class="about">About us</a></li>
        <li ><a href="https://www.instagram.com/" class="follow">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
      </ul>
    </nav>
    <nav class="mobile">
      <ul>
        <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
        <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
        <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
        <li><a href="#" class="button">Join us</a></li>
      </ul>
    </nav>
  </div>
</header>
      Login or Signup to reply.
    Please signup or login to give your own answer.

    Back To Top
    Search