Я пытаюсь достичь этого макета, используя сетку CSS.
Изображение:
Это то, что я есть на данный момент:
#wrapper {
display: grid;
gap: 20px;
grid-template-columns: auto 300px 1fr 1fr 180px auto;
grid-template-rows: auto;
grid-template-areas:
"logo nav-primary nav-primary nav-primary nav-primary search"
"nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary"
"aside-1 aside-1 article article aside-2 aside-2"
"footer footer footer footer footer footer";
}
/* Article: use up remaining width */
#article{
grid-area: article;
}
/* Logo: use up a little width as possible */
#logo{
grid-area: logo;
}
/* Nav Primary: use up remaining width */
#nav-primary{
grid-area: nav-primary;
}
/* Nav Secondary: use full width */
#nav-secondary{
grid-area: nav-secondary;
}
/* Search: use up a little width as possible */
#search{
grid-area: search;
}
/* Aside 1: fixed with of 300px */
#aside-1{
grid-area: aside-1;
}
/* Aside 2: fixed with of 180px */
#aside-2{
grid-area: aside-2;
}
/* Footer: use full width */
#footer{
grid-area: footer;
}
/* Demo style */
#wrapper > * {
background: #C4C4C4;
padding: 10px;
}
<div id="wrapper">
<article id="article">Article (use up remaining space)</article>
<header id="logo">Logo</header>
<nav id="nav-primary">Nav Primary</nav>
<nav id="nav-secondary">Nav Secondary</nav>
<form id="search">Search Form</form>
<aside id="aside-1">Aside 1 (fixed width: 300px)</aside>
<aside id="aside-2">Aside 2 (fixed width: 180px)</aside>
<footer id="footer">Footer</footer>
</div>
Codepen: https://codepen.io/aobrien/pen/YzwNZpy
Проблема в том, что Aside1 не 300 пикселей, а 300 пикселей + ширина столбца lo go. То же самое для Aside2, его 180 пикселей + ширина столбца поиска. Кажется, я не могу установить фиксированную ширину для Aside1 и Aside2, в то же время имея lo go и поиск по ширине динамически c, чтобы соответствовать их содержимому и быть как можно меньше.
Поле lo go всегда должно быть как можно меньше, чтобы оно подходило только для содержимого. То же самое для поиска, как можно меньше.
Aside1 должна иметь фиксированную ширину 300px, а Aside2 должна иметь фиксированную ширину 180px.
Мое единственное правило , Я не могу вносить какие-либо изменения в структуру HTML, как видно, поэтому не нужно вкладывать эти элементы. Однако я могу добавить новые элементы HTML внутри текущих элементов, которые могут содержать фиксированную ширину (если это поможет?).
Мне не нужно полагаться на grid-template-areas, это может быть явная или неявная сетка. Он также может содержать больше столбцов, если это как-то помогает. Любые изменения в CSS приветствуются.
Единственное решение, которое у меня, кажется, было до сих пор (которое не является решением, на которое я хочу соглашаться), - это присвоить фиксированную ширину lo go и поиск, а затем вычислите оставшуюся ширину, чтобы получить ширину Aside1 и Aside2. Однако это действительно не то, что я искал, так как я хотел бы сохранить его как динамический c, насколько это возможно, без необходимости вручную устанавливать несколько фиксированных значений ширины в макете.
Другое решение, которое я пробовал, было вместо определяя фиксированную ширину Aside1 через grid-template-columns, я мог бы создать новый div внутри Aside1 и присвоить ему width: 300px и установить grid-template-columns на auto для этого столбца. Это работает, за исключением случаев, когда lo go становится шире, чем 300 пикселей, тогда Aside1 также становится шире, чем 300 пикселей.
Есть ли у кого-нибудь какие-либо решения или указатели, которые могли бы мне помочь?