У меня возникла проблема при попытке выровнять базовые линии заголовков внутри мегаменю.
/* Presentational bits */
.add-divider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 0.65em;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.standard-list {
list-style-type: none;
padding-left: 0;
list-style: none;
}
/* Core Styling */
.mega-menu-wrapper {
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
grid-gap: 10px;
align-items: baseline;
}
<nav>
<ul class="mega-menu-wrapper">
<li class="mega-menu-item">
<h5 class="add-divider">Typical Section Header</h5>
<ul class="standard-list">
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
</ul>
</li>
<li>
<h5 class="add-divider">Atypical Section Header with much longer content in it that breaks to another line</h5>
<ul class="standard-list">
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
</ul>
</li>
<li>
<h5 class="add-divider">How to accomodate different sized sections Headers?</h5>
<ul class="standard-list">
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
</ul>
</li>
<li><h5 class="add-divider">The section dividers should line up</h5>
<ul class="standard-list">
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
</ul></li>
<li>
<h5 class="add-divider">No matter the content of the headers</h5>
<ul class="standard-list">
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
<li><a href="#">Link to nowhere</a></li>
</ul>
</li>
</ul>
</nav>
Как видно, у меня есть навигация, внутри этой навигации находится неупорядоченный список, а внутри каждого элемента списка есть заголовок и собственный неупорядоченный список элементов навигации.,У каждого из заголовков есть своя нижняя граница для эстетических целей и для разделения заголовка и ссылок.
Проблема в том, что я не могу выровнять эти нижние границы, которые являются стилями заголовков.Я думал, что это будет довольно простая задача с CSS Grid, но, возможно, я использую неправильную вещь для стилизации этого меню, или я не знаю о некоторых функциях CSS Grid.
В целом Я просто хочу выровнять базовые линии этих заголовков, даже если они разбиваются на несколько строк.
Я рассмотрел следующие ресурсы, и ни один из них не соответствует моему сценарию использования, ноЯ не могу быть единственной, у кого есть эта проблема, или ее легче решить, чем я думала, и я что-то упускаю.В любом случае, вот что я пытался безрезультатно:
Любая помощь очень ценится.
Пример CodePen
Обновление
Я хотел бы иметь возможность поддерживать переменное количество ссылок, так как это мегаменю, я не знаю, сколько ссылок пользователь добавит в него.
Я понимаю, что это может быть не такбыть в состоянии сделать так, как мой HTML структурирован сейчас. Я открыт для изучения новых способов структурирования HTML до тех пор, пока у меня может быть 4 столбца пунктов меню до 5-го разрыва новой строки.