CSS 某些列的宽度固定的网格

Question

我正在尝试通过使用 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>

代码笔：https://codepen.io/aobrien/pen/YzwNZpy

问题是 Aside1 不是 300px，而是 300px + 徽标列的宽度。与 Aside2 相同，其 180px + 搜索列的宽度。我似乎无法为 Aside1 和 Aside2 设置固定宽度，同时让徽标和搜索的宽度动态变化以适应其内容并尽可能小。

徽标框必须始终尽可能小，以便只适合内容。搜索也一样，越小越好。

Aside1 需要固定宽度 300px，Aside2 需要固定宽度 180px。

我唯一的规则是，我不能对所看到的 HTML 结构进行任何更改，因此不能嵌套这些项目。但是，我可以在当前元素中添加新的 HTML 元素，这些元素可以包含固定宽度（如果有帮助的话？）。

我不必依赖grid-template-areas，它可以是显式或隐式网格。如果有帮助，它还可以包含更多列。欢迎对 CSS 进行任何更改。

到目前为止我似乎唯一的解决方案（这不是我想要解决的解决方案）是为徽标和搜索分配固定宽度，然后计算剩余宽度以达到的宽度旁白 1 和旁白 2。然而，这真的不是我想要的，因为我想尽可能保持动态，而不需要在布局中手动设置多个固定宽度。

我尝试的另一个解决方案不是通过 grid-template-columns 定义 Aside1 的固定宽度，我可以在 Aside1 内部创建一个新的 div 并给它一个 width: 300px 并设置 grid-template-columns 到 auto 该列。这确实有效，除非徽标变得比 300px 宽，然后 Aside1 也变得比 300px 宽。

有没有人有任何解决方案或指示可以帮助我？

Answer 1

首先你有 6 列，但我们只能为这个任务保留 5 列。其次 - 如果我们要使用 t 单元格折叠，我们不需要在 grid-template-columns 中设置固定宽度。匹配更容易为特定列设置固定宽度。给你

#wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: auto;
 grid-template-areas: 
    "logo nav-primary nav-primary nav-primary search"
    "nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary"
    "aside-1 aside-1 article aside-2 aside-2"
    "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;
  max-width: 300px;
}


/* 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;
  max-width: 180px;
}


/* Aside 1: fixed with of 300px */

#aside-1 {
  grid-area: aside-1;
  width: 300px;
}


/* Aside 2: fixed with of 180px */

#aside-2 {
  grid-area: aside-2;
  width: 180px;
}


/* Footer: use full width */

#footer {
  grid-area: footer;
}


/* Demo style */

#wrapper>* {
  background: #C4C4C4;
  padding: 10px;
  box-sizing: border-box;
}

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

请注意，在这种情况下，您的徽标宽度应小于 300 像素。搜索宽度应小于 180 像素。如果您希望搜索宽度超过 180 像素 - 我们应该稍微编辑一下代码。

#wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: auto auto 1fr auto auto auto;
  grid-template-rows: auto;
 grid-template-areas: 
    "logo nav-primary nav-primary search search 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;
  max-width: 300px;
}


/* 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;
  width: 300px;
}


/* Aside 2: fixed with of 180px */

#aside-2 {
  grid-area: aside-2;
  width: 180px;
}


/* Footer: use full width */

#footer {
  grid-area: footer;
}


/* Demo style */

#wrapper>* {
  background: #C4C4C4;
  padding: 10px;
  box-sizing: border-box;
}

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

CSS 某些列的宽度固定的网格

CSS grid with fixed widths for some columns

html

css

grid

css-grid