有没有办法让一些网格项目从左边开始，而一些在同一行从右边开始？

Question

我使用网格布局创建了一个导航栏。

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

我想在这里实现的是让 logo 目前只是一个 h1，菜单值像 float: left; 一样从左边开始，按钮从就像 float: right;.

我尝试了 float 但无法实现我想要的，因为你不能将 float 与 grid 一起使用，我猜是（？）。

有人可以告诉我是否有办法做到这一点，或者至少告诉我正确的方法吗？

PS: 我目前正在使用 React.

Answer 1

您可以像下面的代码那样使用text-align：

.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>

有没有办法让一些网格项目从左边开始，而一些在同一行从右边开始？

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

html

css

grid

reactjs