CSS-GRID Проблемы с выравниванием содержимого на панели навигации
Я выполняю задание с помощью CSS-сетки, и частью критериев является создание веб-сайта полностью с помощью css-grid и html, однако, когда я пытаюсь выровнять элементы навигационной панели с помощью css-grid, я продолжаю сталкиваться с проблемой где ссылки просто остаются на своих местах. Я создал codepen.io, если это полезно: https://codepen.io/spatrick195/pen/XBzYJe HTML
<div class = "page-layout">
<div class = "top-nav">
<div id = "nav-brand"><a id = "nav-brand" href = "#">SR-2018</a></div>
<div class = "nav-links">
<a class = "nav-links" href = "#">Login</a>
<a class = "nav-links" href = "#">Sign Up</a>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.page-layout{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
}
.top-nav{
grid-column: span 3;
padding: .5rem 1rem;
background-color: #FAFAFA;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
a{
text-decoration: none;
}
#nav-brand{
grid-column: 1;
}
.nav-links{
grid-column: 3;
}
Есть ли способ обойти это, или мне придется воссоздать сетку в верхней части навигации?
Ответы 2
Не совсем уверен, как должен выглядеть окончательный дизайн. Но если я вас правильно понял, вы ищете что-то вроде этого кодовый ключ.
Я добавил следующий код, а также id = "nav-bar" в html для контейнера навигационных ссылок.
#nav-bar {
display: flex;
text-align: center;
flex: 1;
}
#nav-bar > .nav-links {
text-align: center;
flex: 1;
}
Сетка используется с flexbox. Таким образом, вы используете flexbox для отдельных ячеек сетки, чтобы выровнять содержимое по своему усмотрению.
В зависимости от того, что вам нужно, вы можете посмотреть на следующее перо, где flex установлен на другом элементе: Все на одной линии
1) Установите свойства контейнера сетки в блоке top-nav.
.top-nav{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
/* decorative properties */
padding: .5rem 1rem;
background-color: #FAFAFA;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
Причина этого в том, что свойства контейнера сетки применяются только к его непосредственным дочерним элементам (как @David Thomas уже указал в комментариях)
2) Переименуйте классы по навигационным ссылкам с nav-links на nav-link
* {
margin: 0;
padding: 0;
}
.top-nav {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
padding: .5rem 1rem;
background-color: #FAFAFA;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
a {
text-decoration: none;
}
#nav-brand {
grid-column: 1;
}
.nav-links {
grid-column: 3;
}<div class = "page-layout">
<div class = "top-nav">
<div id = "nav-brand"><a id = "nav-brand" href = "#">SR-2018</a></div>
<div class = "nav-links">
<a class = "nav-link" href = "#">Login</a>
<a class = "nav-link" href = "#">Sign Up</a>
</div>
</div>
</div>Интересный способ, что значит 1fr 2fr 1fr?
@joshmoto - на самом деле это была часть кода OP;) - но чтобы ответить на ваш вопрос: новая единица fr представляет собой часть доступного пространства в контейнере сетки. - см. MDN
Ссылки, которые вы пытаетесь переместить, не кажутся элементами сетки, поскольку они вложены на несколько уровней ниже дочерних элементов элемента
.page-layout.