How to set li's side by side in CSS Grid-CodePudding

I need to put the li's side by side but I'm having trouble doing that.

.logo {
  display: grid;
  grid-column: span 2;
  justify-content: start;
}

.logo h4 {
  grid-column: 2;
}

nav {
  display: grid;
}

ul {
  text-transform: uppercase;
  list-style: none;
  gap: 20px;
}

<header>
  <div >
    <img src="image 17.png" alt="My Learning Journal logo">
    <h4>My learning journal</h4>
  </div>
  <nav>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

CodePudding user response：

You can use display:flex to put the li's side by side

ul {
  text-transform: uppercase;
  list-style: none;
  gap: 20px;
  display: flex
}

<ul>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CodePudding user response：

There were a few problems with your posted code; mainly that you were trying to position elements within a grid that was declared on their ancestor or – in the case of the .logo CSS – trying to position the element in grid-column: 2, despite that element not being a grid-item (the element itself had display: grid but it – obviously? – can't be placed in the second column of itself.

The following approach – with explanatory comments in the code – seems to do as you require:

/* removing browser default margins and padding, setting the sizing
   algorithm to border-box; this includes border-sizes and padding
   in the declared width of the elements: */

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.logo {
  /* you've set display: grid; which means the children of this element
     become grid-items, but this element is not (unless its parent is
     also set to display: grid, but you haven't shown that in your code: */
  display: grid;
  /* setting the same gap as declared for the <ul> element: */
  gap: 20px;
  /* the following rule has no effect, as this element isn't a grid-item: */
  grid-column: span 2;
  justify-content: start;
  /* to create a two-column grid layout, we use the following: */
  grid-template-columns: repeat(2, 1fr);
}


/* this is just so that we can visualise the <img> element's placement,
   adjust to your taste: */

.logo img {
  background-image: repeating-linear-gradient( -45deg, transparent 0 5px, #eee9 5px 7px);
  /* setting the maximum width (in left-to-right, top-to-bottom languages, like Latin and
     its derivatives) of the element to be 100% of the available space: */
  max-inline-size: 100%;
  /* and for the <img> to fill the available space: */
  object-fit: cover;
}

.logo h4 {
  grid-column: 2;
}

ul {
  display: grid;
  /* setting two grid-columns, with the repeat() function; this sets the 2 columns
     to both have the size of 1fr (one fraction of the available space), so that
     they are each equally sized:  */
  grid-template-columns: repeat(2, 1fr);
  text-transform: uppercase;
  list-style: none;
  gap: 20px;
}

nav a {
  background-color: lightskyblue;
  color: #fff;
  display: block;
}

<header>
  <div >
    <img src="image 17.png" alt="My Learning Journal logo">
    <h4>My learning journal</h4>
  </div>
  <nav>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

It's worth pointing out that, in this instance, display: flex may be be preferred:

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.logo {
  /* you've set display: grid; which means the children of this element
     become grid-items, but this element is not (unless its parent is
     also set to display: grid, but you haven't shown that in your code: */
  display: grid;
  /* setting the same gap as declared for the <ul> element: */
  gap: 20px;
  justify-content: start;
  /* to create a two-column grid layout, we use the following: */
  grid-template-columns: repeat(2, 1fr);
}

.logo img {
  background-image: repeating-linear-gradient( -45deg, transparent 0 5px, #eee9 5px 7px);
  min-inline-size: 100%;
  object-fit: cover;
}

.logo h4 {
  grid-column: 2;
}

ul {
  /* setting flex layout: */
  display: flex;
  text-transform: uppercase;
  list-style: none;
  /* using gap as before: */
  gap: 20px;
}

li {
  /* instructing the <li> element(s) to expand to fill available space: */
  flex-grow: 1;
}

nav a {
  background-color: lightskyblue;
  color: #fff;
  display: block;
}

<header>
  <div >
    <img src="image 17.png" alt="My Learning Journal logo">
    <h4>My learning journal</h4>
  </div>
  <nav>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

References:

CodePudding user response：

Horizontal menu can be done on both Flex and Grid. If you are mastering Grid, either set general flow direction using grid-auto-flow rule, or declare dynamic column layout using grid-template-columns along with auto-fit/auto-fill.

ul {
  text-transform: uppercase;
  list-style: none;
  
  display: grid;
  grid-auto-flow: column; /*  first way */
  grid-template-column: repeat(auto-fill, 1fr) /* second way */

  column-gap: 20px;
}