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

Question

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 class="logo">
<img src="image 17.png" alt="My Learning Journal logo">
<h4>My learning journal</h4>
</div>
<nav>
<ul>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</header>

Answer 1

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>About Me</li>
<li>Contact</li>
</ul>

Answer 2

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;
}

Answer 3

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 class="logo">
<img src="image 17.png" alt="My Learning Journal logo">
<h4>My learning journal</h4>
</div>
<nav>
<ul>
<li>About Me</li>
<li>Contact</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 class="logo">
<img src="image 17.png" alt="My Learning Journal logo">
<h4>My learning journal</h4>
</div>
<nav>
<ul>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</header>
References:
CSS Logical Properties.
display.
gap.
grid-column.
grid-template-columns.
justify-content.
max-inline-size.
object-fit.
repeat().