如何将一个特定的网格区域分配给一个类，然后将不同的网格区域分配给它的子元素？
将一个特定的网格区域分配给一个类，然后将不同的网格区域分配给它的子元素可以通过CSS的网格布局（Grid Layout）来实现。
网格布局是一种二维布局系统，可以将一个网格划分为多个网格区域，然后将元素放置在这些网格区域中。以下是实现的步骤：
- 创建一个网格容器：通过设置一个元素的
display属性为grid，将其变为一个网格容器。例如：
.container {
display: grid;
}- 划分网格区域：使用
grid-template-areas属性为网格容器定义网格区域。每个网格区域由一个字符串表示，可以使用自定义的名称或预定义的关键字。例如：
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}- 分配网格区域给子元素：使用
grid-area属性将子元素放置到相应的网格区域中。子元素的grid-area值应与网格容器中定义的网格区域名称相匹配。例如：
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}完整的示例代码如下：
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
<style>
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
</style>这样，网格容器中的子元素就会按照指定的网格区域进行布局。
在腾讯云的产品中，可以使用云服务器（CVM）来部署网站或应用程序，并使用云数据库（CDB）存储数据。此外，腾讯云还提供了云原生服务（Tencent Kubernetes Engine）和人工智能服务（腾讯云AI）等产品，以满足不同场景的需求。具体产品介绍和链接地址请参考腾讯云官方网站。
相关·内容
2回答
CSS网格，中间有一个额外的包装器
css、twitter-bootstrap-3、css-grid
我想使用CSS网格的网格模板区域。
但问题是，我使用的CMS添加了很多额外的包装器。有没有办法忽略额外的包装器？因为它弄乱了漂亮的网格区域。
我正在尝试覆盖css网格的自动放置机制。因此，任何位于中间的div，如果没有指定特定的网格区域，都会出现在网格的末尾，而不会影响网格本身。
我在这里创建了一个问题的例子--
您可以看到，由于额外的包装器，'sidebar‘元素没有分配给我想要的区域。
HTML
.container {
display: grid;
grid-gap: 5px;
grid-template-areas: "header header he
浏览 0提问于2017-10-21得票数 8
1回答
无法使用CSS网格/网格模板区域布局页面。
html、css、css-grid
我是HTML，CSS和JS的新手，这是我第一次在这里发表文章。我一直在这里搜寻，在这个问题上花了一天左右的时间，但没有找到解决办法。
我正试图用CSS网格来布局一个主页。我尝试过使用网格模板区域显式地布局页面，也尝试使用单独的网格模板列和行，但是我的代码似乎没有任何效果。我试过几种不同的方法。我肯定是比较小的东西，但我看不见。
这里有一个指向Codepen - 的链接
有人能给我一些指导或建议吗？
body {
background-color: yellow;
color: black;
font-family: Georgia, sans-serif;
font-siz
浏览 9提问于2020-07-26得票数 4
回答已采纳
2回答
将元素从嵌套的"CSS网格“移到外部
html、css、css-grid
我想以较小的屏幕宽度从嵌套网格中提取元素。在本例中，当屏幕达到某一像素宽度时，所有元素都被设置为其他元素。
我希望这些元素一个接一个地显示出来，然后返回到像素宽度更大的原始区域。也许这是一个相当简单的解决方案，但我还没有找到任何提示。也许有人有主意？
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.f
浏览 2提问于2017-09-27得票数 5
回答已采纳
1回答
css网格-模板-区域属性不对齐网格项目
html、css、grid-layout、css-grid
我是css网格的新手，我正在尝试用这个布局来构建一个页面：
我遇到的问题是.main类和容器网格中的网格。
我想我在.main中的网格设置是错误的。
对于上面的容器.container，我可以看到三列布局正在工作。
在第一行，我希望div image div跨越3列中的2列，使blogart div占据1列。
第二行应该有三个blogart div，每个div跨越一列。
但在内部网格.main中，所有标记都在第四列中。
我已经设置了一个 Greatful来寻求任何建议。
这是我的标记，css在代码中：
body {
padding-top: 20px;
b
浏览 3提问于2017-04-18得票数 6
回答已采纳
1回答
CSS网格中父网格中嵌套网格的提取
html、css、responsive-design、css-grid
我正在修改CSS，并想知道是否有可能在调整屏幕大小时让嵌套网格从其父网格中移出。
我尝试过将grid-template-areas更改为包含“子内容”，但这似乎是错误的，并扰乱了网格。
例如，我已经设置了以下模板，并希望在媒体断点被击中时，使用"subcontent“divs (粉色)替换"profile”区域。
在纯CSS网格中有任何方法可以做到这一点，而不需要在JS中进行绑定吗？
.wrapper {
margin: auto;
width: 80%;
background-color: #e0e0e0;
display: grid;
grid-te
浏览 4提问于2017-08-25得票数 2
回答已采纳
3回答
角5和CSS网格-找不到网格区域-警告
css、angular5、css-grid、autoprefixer
我使用CLI创建了一个新的角5.2项目(例如，ng新MyApp)
切换到文件夹并运行应用程序可以正常工作。(例如服务)
我对生成的代码做了以下更改(请参阅下面)。只有HTML和CSS代码的变化，非常小，我张贴的是全部的变化。
当我保存代码时，它会重新编译，并引发警告：
ErrorEmittedError：(发出值而不是错误实例)自动重订器: D:\MyApp\src\app\app.component.css:51:7:找不到网格区域:页眉、导航、内容、侧边栏、广告、页脚
此错误似乎与CSS的媒体查询部分有关。如果我删除该部分，错误就会消失。
我不记得这种情况发生在角4.x？有什么好主
浏览 0提问于2018-02-02得票数 7
回答已采纳
2回答
在移动视图中折叠网格项时避免双重网格间隙
html、css、css-grid
我正在使用CSS网格创建一个站点布局，我几乎完全可以得到我想要的，但是我有一个问题：
我的桌面视图是我想要的，但是当它缩小到移动大小的视图(所有元素都在不同的行中)时，我的leftPad和rightPad div会导致一个双grid-gap，如下所示：
代码可以在这里看到：
.container {
display: grid;
grid-template-areas:
"nav nav nav nav nav"
"header header header header header"
"leftPad l
浏览 1提问于2019-03-16得票数 3
2回答
CSS网格和语义HTML
html、css、css-grid、semantic-markup
我正在学习CSS grid，在尝试布局和使用语义html的同时，我遇到了一些问题。
所以基本上我将网格设置为3x3，左边和右边有空格，内容在中间
.grid-container {
display: grid;
grid-template-columns: 1fr 40em 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
" . header . "
" . content . "
" . footer . ";
}
.heade
浏览 19提问于2019-10-23得票数 2
回答已采纳
1回答
网格模板-区域垂直分布一组文章
html、css、css-grid
我试着得到一组垂直分布的文章
<article class="article">
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen
less that 500 pixels wide. We go to a two column layout, and then to a
three column layout by redefining the grid,and the place
浏览 1提问于2019-08-14得票数 0
2回答
对齐不直，行不跨？
css、css-grid
我在两个问题上被困在我的布局上。1)页眉和页脚中的两个div不对齐(稍微偏离一点) 2)我使用grid-areas作为我的主要内容，但不能让它一直延伸到页脚。
.grid {
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-template-areas:
"header header header header header header heade
浏览 0提问于2019-07-05得票数 0
回答已采纳
2回答
为什么我的网格只为页脚工作？
html、css、syntax-error、css-grid
告诉我为什么网格区域不能很好地工作来帮助我。我已经使用它的导航，主要和内容也，但输出是意外的(附在下面)。所有元素都安排在页脚下面，元素不在那里。
请帮助我......I是一个nw编码器并在线学习网络开发。
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.5fr 0.8fr;
grid-template-areas: "nav nav nav nav" "sidebar main main main" &#
浏览 3提问于2021-04-03得票数 1
回答已采纳
1回答
HTML网格布局不符合CSS
html、css
因此，我尝试使用纯HTML和CSS设置一个网格格式的网站页面，您将在下面的代码中看到这一点。 我尝试在两个Header标签之间交替，沿着左手边的inner-placeholder & div标签列。 您将看到具有清晰布局的grid-template-area的HTML布局对齐方式，以及grid-template-rows指定的行数 那么为什么我只在屏幕的角落看到一个红色的盒子，而我想要的东西在插图中是相当明显的-除了一个弯曲的盒子，然后是一个直框，然后是一个弯曲的盒子，等等，沿着左手边往下走？ 我尝试更改fr编号以适应左侧的行数。 谢谢。 Illustration .grid{
浏览 17提问于2020-06-30得票数 0
回答已采纳
1回答
如何使用网格模板区域使内容占用旁边的区域？
html、css、css-grid
网格模板区域在这里被使用。然而，主要的区域并没有占用其余的区域，我不需要留出我的项目。
我怎样才能使主要区域占据其余的区域？
.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: 1
浏览 3提问于2022-07-11得票数 0
2回答
css网格网页-显示平面网格，而不是预期的正方形
html、css、css-grid
我最近开始学习html和CSS。我做了一个非常简单的CSS网格布局，但它生成了一个水平条，而不是预期的正方形布局。我做错了什么？ .header {
grid-area: "h";
}
.sideMenu {
grid-area: "s";
}
.content {
grid-area: "c";
}
.footer {
grid-area: "f";
}
.grid-body {
display: grid;
grid-template-areas:
". h h
浏览 43提问于2021-11-04得票数 0
回答已采纳
2回答
Css网格子项不对中
css、css-grid
我正在试用一个使用CSS网格的布局。在标题中，我有一个名为logo的类的div，我希望它垂直对齐。
下面是完整的代码(查看全屏以查看问题)：
html,
body {
height: 100%;
}
.container {
display: grid;
height: 100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "h h" "s m" "f f";
grid-gap: 10
浏览 0提问于2020-12-14得票数 0
回答已采纳
2回答
如何垂直使用CSS网格中的所有可用空间？
html、css、css-grid
我正在尝试构建一个带有标题栏、导航头、页脚和中间的主要内容区域的网页布局(侧栏和主视图分为两部分)。
我打算为它使用CSS网格布局。我的当前代码管理它的所有内容，除了:主内容(和侧栏)调整到它的内容。这不是我想要的。
如何使第三格行填充所有剩余的垂直空间？
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: min-content min-content au
浏览 4提问于2017-09-11得票数 11
回答已采纳
1回答
用于页面标题的CSS网格划分
css-grid
我正在使用一个css网格(以前一直在使用flexbox)，并且我正在尝试为我的页面标题设计如何打破css网格。我的网站结构如下：
下面是css：
.site {
column-gap: $sidebar-gap;
display: grid;
grid-template-columns: auto ($sidebar-width); // site structure
grid-template-rows: auto 1fr auto; // sticky header & footer
grid-template-areas
浏览 2提问于2021-12-22得票数 -1
回答已采纳
2回答
响应速度不快的网格区域按预期工作。
css、css-grid
:root {
--min-screen-height:100px;
}
.App {
display: grid;
grid-template-columns: 0.7fr 0.9fr 1.5fr 0.9fr;
grid-template-rows: 2.75rem 3fr;
grid-template-areas:
'nav nav nav nav'
'sidebar leftmenu content rightmenu';
gap: 0.75rem 0.4rem;
}
.navigation {
grid
浏览 1提问于2021-11-02得票数 1
回答已采纳
1回答
网格布局-从页眉和页脚分配边条和主conent与完全高度休息？
html、css、css-grid
我正在尝试做一个布局，它应该占据页眉和页脚的高度，将rest留给主容器。(边栏，内容)。但不能把这个存档。有人帮我吗？
对于页眉和页脚，我没有固定的高度。(它只应占据内容高度)
.container {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 100px auto;
grid-template-areas:
"header header"
"sidebar content"
"footer foote
浏览 1提问于2020-10-21得票数 0
回答已采纳
1回答
使用css网格的网格内滚动条
html、css、css-grid
我有一个html页面，我不想在主体范围内滚动，但是，当使用嵌套的css网格时，即使当嵌套网格中的内容溢出时，我也无法控制它的滚动条，即使它具有滚动溢出的属性。下面我提供的代码片段有一个包含网格的容器，它包含一个称为工作区的网格区域，其中包含一个也是css网格的组件。组件的内容强制整个主体滚动，而我只想让内容滚动。我试着把高度调到100%和100 no，但没有这样的运气。
body, html {
margin: 0px;
}
.container {
background-color: #282828;
color: whitesmoke;
display: g
浏览 1提问于2020-01-05得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
