Is there a way for some grid items to start from left and some for the right in same line?-CodePudding

I created a navbar using grid layout.

HTML

<nav className="nav nav_dark">
    <h1 className="logo white">Menu</h1>
    <div className="menu white">
        <ul>
            <li><a href='#'>Home</a></li>
            <li><a href='#'>Support</a></li>
            <li><a href='#'>About Me</a></li>
            <li className='buttonlist'><button>Reach me</button></li>
        </ul>
    </div>    
</nav>

CSS

.nav {
    height: 80px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 80px;
    grid-column-gap: 300px;
}

.nav_dark {
    background-color: #1d1733;
}

.menu {
    margin: auto;
}

.menu > ul {
    list-style: none;
    display: inline-block;
}

.menu > ul > li {
    display: inline;
    margin: 10px;
}

.menu > ul > li > a {
    text-decoration: none;
    color: white;
}

.menu > ul > .buttonlist {
    margin: 0 50px;
}

.menu > ul > li > button {
    padding: 15px 60px;
    margin: 0;
    border-radius: 15px;
    border-width: 0;
    background-color: #c746eb;
    color: white;
    font-weight: bold;
}

.logo {
    margin: auto;
}

The thing I want to achieve here is to have the logo which is currently just a h1 with Menu value to start from left like float: left; and the buttons to start from right like float: right;.

I tried the float but couldn't achieve what I wanted since you can't use float with grid, I guess(?).

Can someone tell me if there is a way to do it or at least show me the right way?

PS: I am currently using React.

CodePudding user response：

You can use text-align like below code:

.nav {
    height: 80px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 80px;
   // grid-column-gap: 300px;


}

.nav_dark {
    background-color: #1d1733;
}

.menu {
  //  margin: auto;
      text-align:right;

}

.menu > ul {
    list-style: none;
    display: inline-block;
}

.menu > ul > li {
    display: inline;
    margin: 10px;
}

.menu > ul > li > a {
    text-decoration: none;
    color: white;
}

.menu > ul > .buttonlist {
    margin: 0 10px;
}

.menu > ul > li > button {
    padding: 15px 40px;
    margin: 0;
    border-radius: 15px;
    border-width: 0;
    background-color: #c746eb;
    color: white;
    font-weight: bold;
}

.logo {
    margin: auto 10px;
    color:white;
    text-align:left;

}

<nav class="nav nav_dark">
       <h1 class="logo white">Menu</h1>
    <div class="menu white">
        <ul>
            <li><a href='#'>Home</a></li>
            <li><a href='#'>Support</a></li>
            <li><a href='#'>About Me</a></li>
            <li class='buttonlist'><button>Reach me</button></li>
        </ul>
    </div>    
</nav>