2023年6月13日 16:02:37go评论70阅读模式

英文:

Change a grid website template from 3 column to 2 column

问题

Sure, here's the translated part:

我需要完全删除 HTML 和 CSS 中的

元素。

问题在于我不理解网格布局，我正在学习，所以不知道如何操作以及模板中的 1fr 部分和 minmax(75px, auto) /* Nav */ 部分我无法理解。

CSS 代码如下：

body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-areas: "header header header" "nav content side" "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}

header {
  grid-area: header;
  background: #baffc9;
  height: 100px;
}

nav {
  grid-area: nav;
  margin-left: 0.5rem;
  background: red;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
  background: #ffdfba;
}

footer {
  grid-area: footer;
  background: #bae1ff;
  height: 100px;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas: "header" "nav" "content" "side" "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto /* Header */
    minmax(75px, auto) /* Nav */
    1fr /* Content */
    minmax(75px, auto) /* Sidebar */
    auto;
    /* Footer */
  }
  nav,
  aside {
    margin: 0;
  }
}

你可以按照需要从 CSS 中删除

部分来学习。

英文:

Edit: still in need of help with this question

I need to completely delete the <nav> item from the HTML and CSS

The problem is that I don't understand grid layouts, I am learning, so I don't really know how to do it and the 1fr part and the minmax(75px, auto) /* Nav */ I cannot understand that part in this template.

body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-areas: &quot;header header header&quot; &quot;nav content side&quot; &quot;footer footer footer&quot;;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}

header {
  grid-area: header;
  background: #baffc9;
  height: 100px;
}

nav {
  grid-area: nav;
  margin-left: 0.5rem;
  background: red;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
  background: #ffdfba;
}

footer {
  grid-area: footer;
  background: #bae1ff;
  height: 100px;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas: &quot;header&quot; &quot;nav&quot; &quot;content&quot; &quot;side&quot; &quot;footer&quot;;
    grid-template-columns: 1fr;
    grid-template-rows: auto/* Header */
    minmax(75px, auto)/* Nav */
    1fr/* Content */
    minmax(75px, auto)/* Sidebar */
    auto;
    /* Footer */
  }
  nav,
  aside {
    margin: 0;
  }
}

&lt;div class=&quot;container&quot;&gt;
  &lt;header&gt;
    this is the header
  &lt;/header&gt;
  &lt;nav&gt;
    this red one must die
  &lt;/nav&gt;
  &lt;main&gt;
    this is the main
  &lt;/main&gt;
  &lt;aside&gt;
    this is the aside
  &lt;/aside&gt;
  &lt;footer&gt;
    this is the footer
  &lt;/footer&gt;
&lt;/div&gt;

I would like to understand and to completely delete this item from the CSS to learn how it is done

答案1

得分: 0

以下是翻译好的部分：

Desktop

grid-template-areas

grid-template-areas: 
  "header header header" 
  "nav content side" 
  "footer footer footer";

这代表了网格的区域。
每一行代表网格的一行，每一行中的每个项目代表一个列。
具体来说：

header 区域将占据第一行并跨足 3 列
第二行将有 3 列，第一个是 nav，第二个是 content，第三个是 side
页脚将占据第三行并跨足 3 列
如果要移除 nav，您将得到只有 2 列的布局：

grid-template-areas: 
  "header header" 
  "content side" 
  "footer footer";

grid-template-columns

grid-template-columns: 200px 1fr 200px;

这表示第一列和第三列将占据 200px，第二列将占据剩余的空间。
您需要移除第一列：

grid-template-columns: 1fr 200px;

Mobile

grid-template-areas
您只需移除 nav 区域：

grid-template-areas: "header" "content" "side" "footer";

grid-template-rows：
nav 区域是第二行，您可以简单地删除它：

grid-template-rows: auto /* Header */ 1fr /* Content */ minmax(75px, auto) /* Sidebar */ auto;
/* Footer */

如果您想了解 minmax(75px, auto)/* Nav */ 的含义，它很直观：
nav 区域将具有最小高度为 75px 和最大高度为 auto，因此它将占据其内容所需的空间。

希望这能帮助您进行布局更改。

英文:

Let's decrypt step by step what's going on and what changes are needed.

Desktop

grid-template-areas

grid-template-areas: 
  &quot;header header header&quot; 
  &quot;nav content side&quot; 
  &quot;footer footer footer&quot;;

It represents the area of the grid.
Every line is one line of your grid, every item in each line is a column.
It means:

the header area will occupy the first line and span across the 3 columns
the second line will have 3 columns, first is occupied by the nav, second is for the content, third for the side
the footer will occupy the third line and span across the 3 columns

If you want to remove the nav, you'll get a layout with only 2 columns:

grid-template-areas: 
  &quot;header header&quot; 
  &quot;content side&quot; 
  &quot;footer footer&quot;;

grid-template-columns

  grid-template-columns: 200px 1fr 200px;

It means that the first and the third columns will take 200px, the second one will take the remaining space.
You need to remove the first column:

  grid-template-columns: 1fr 200px;

Mobile

grid-template-areas
You just need to remove the nav area:

  grid-template-areas: &quot;header&quot; &quot;content&quot; &quot;side&quot; &quot;footer&quot;;

grid-template-rows:
The nav area was the second row, you can simply delete it:

    grid-template-rows: auto/* Header */
    1fr/* Content */
    minmax(75px, auto)/* Sidebar */
    auto;
    /* Footer */

If you want to understand what minmax(75px, auto)/* Nav */ means, it's quite straight forward:
The nav would have had a minimum height of 75px and a maximum height auto so it would have taken the space needed by it's content.

body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-areas: &quot;header header&quot; &quot;content side&quot; &quot;footer footer&quot;;
  grid-template-columns: 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}

header {
  grid-area: header;
  background: #baffc9;
  height: 100px;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
  background: #ffdfba;
}

footer {
  grid-area: footer;
  background: #bae1ff;
  height: 100px;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas: &quot;header&quot; &quot;content&quot; &quot;side&quot; &quot;footer&quot;;
    grid-template-columns: 1fr;
    grid-template-rows: auto/* Header */
    1fr/* Content */
    minmax(75px, auto)/* Sidebar */
    auto;
    /* Footer */
  }
  aside {
    margin: 0;
  }
}

&lt;div class=&quot;container&quot;&gt;
  &lt;header&gt;
    this is the header
  &lt;/header&gt;
  &lt;main&gt;
    this is the main
  &lt;/main&gt;
  &lt;aside&gt;
    this is the aside
  &lt;/aside&gt;
  &lt;footer&gt;
    this is the footer
  &lt;/footer&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

将网格网站模板从三列改为两列。

问题

无法在 Material UI（MUI）选择菜单打开时与屏幕上的任何内容进行交互。

WebStorm/PhpStorm 在使用 CSS 的 lvh 单位时会出现 “Mismatched property value” 错误。

Using -apple-system for monospace and serif

CodenameOne – 对HTML字符串进行编码

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论