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

Question

我正在尝试使用 CSS 网格来实现这种布局。

\n\n

图片：

\n\n

\n\n

这是我到目前为止所拥有的：

\n\n

\r\n

\r\n

#wrapper {\r\n    display: grid;\r\n    gap: 20px;\r\n    grid-template-columns: auto 300px 1fr 1fr 180px auto;\r\n    grid-template-rows: auto;\r\n    grid-template-areas: \r\n    "logo nav-primary nav-primary nav-primary nav-primary search"\r\n    "nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary"\r\n    "aside-1 aside-1 article article aside-2 aside-2"\r\n    "footer footer footer footer footer footer";\r\n}\r\n\r\n/* Article: use up remaining width */\r\n#article{\r\n    grid-area: article;\r\n}\r\n\r\n/* Logo: use up a little width as possible */\r\n#logo{\r\n    grid-area: logo;\r\n}\r\n\r\n/* Nav Primary: use up remaining width */\r\n#nav-primary{\r\n    grid-area: nav-primary;\r\n}\r\n\r\n/* Nav Secondary: use full width */\r\n#nav-secondary{\r\n    grid-area: nav-secondary;\r\n}\r\n\r\n/* Search: use up a little width as possible */\r\n#search{\r\n    grid-area: search;\r\n}\r\n\r\n/* Aside 1: fixed with of 300px */\r\n#aside-1{\r\n    grid-area: aside-1;\r\n}\r\n\r\n/* Aside 2: fixed with of 180px */\r\n#aside-2{\r\n    grid-area: aside-2;\r\n}\r\n\r\n/* Footer: use full width */\r\n#footer{\r\n    grid-area: footer;\r\n}\r\n\r\n/* Demo style */\r\n#wrapper > * {\r\n    background: #C4C4C4;\r\n    padding: 10px;\r\n}

\r\n

<div id="wrapper">\r\n    <article id="article">Article (use up remaining space)</article>\r\n    <header id="logo">Logo</header>\r\n    <nav id="nav-primary">Nav Primary</nav>\r\n    <nav id="nav-secondary">Nav Secondary</nav>\r\n    <form id="search">Search Form</form>\r\n    <aside id="aside-1">Aside 1 (fixed width: 300px)</aside>\r\n    <aside id="aside-2">Aside 2 (fixed width: 180px)</aside>\r\n    <footer id="footer">Footer</footer>\r\n</div>

\r\n

\r\n

\r\n

\n\n

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

\n\n

问题是 Aside1 不是 300px，而是 300px + 徽标列的宽度。Aside2 也是如此，它的 180px + 搜索栏的宽度。\n我可以\xe2\x80\x99t 似乎为 Aside1 和 Aside2 设置固定宽度，同时让徽标和搜索的宽度是动态的适合他们的内容并尽可能小。

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

到目前为止，我似乎拥有的唯一解决方案（这不是我想要解决的解决方案）是为徽标和搜索分配固定宽度，然后计算剩余宽度以实现 Aside1 和 Aside2 的宽度。然而，这确实不是我想要的，因为我想保持它尽可能动态，而不需要在布局上手动设置多个固定宽度。

\n\n

我尝试的另一个解决方案是不是通过定义 Aside1 的固定宽度grid-template-columns，我可以在 Aside1 内部创建一个新的 div 并为其指定 awidth: 300px并设置grid-template-columns为该auto列。这确实有效，除非徽标宽度超过 300 像素，那么 Aside1 也会变得比 300 像素更宽。

\n\n

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

\n

Answer 1

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

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