将网格网站模板从三列改为两列。 huangapple 117266文章 0评论 2023年6月13日 16:02:37go评论64阅读模式 英文: 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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-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; } } <!-- language: lang-html --> <div class="container"> <header> this is the header </header> <nav> this red one must die </nav> <main> this is the main </main> <aside> this is the aside </aside> <footer> this is the footer </footer> </div> <!-- end snippet --> 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: "header header header" "nav content side" "footer footer footer"; 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: "header header" "content side" "footer footer"; 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: "header" "content" "side" "footer"; 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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> body { margin: 0; padding: 0; } .container { display: grid; grid-template-areas: "header header" "content side" "footer footer"; 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: "header" "content" "side" "footer"; grid-template-columns: 1fr; grid-template-rows: auto/* Header */ 1fr/* Content */ minmax(75px, auto)/* Sidebar */ auto; /* Footer */ } aside { margin: 0; } } <!-- language: lang-html --> <div class="container"> <header> this is the header </header> <main> this is the main </main> <aside> this is the aside </aside> <footer> this is the footer </footer> </div> <!-- end snippet --> 通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。 点赞 https://go.coder-hub.com/76462843.html 复制链接 复制链接
评论