网格区域在CSS网格中的布局不正确
我想使我的网站使用CSS网格系统，但似乎无法正常工作。这是我的代码：
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" "about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
问题答案：
使用该grid-template-areas属性时，字符串值必须具有相同的列数。
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" "about-us about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
您可以使用句点或句点的不间断行来表示一个空单元格（规范参考）。
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" " ... about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
从网格规范：
[7.3。 命名区域：the grid-template-areas属性]
所有字符串的列数必须相同，否则声明无效。
如果命名的网格区域跨越多个网格单元，但是这些单元不形成单个填充矩形，则声明无效。
在此模块的将来版本中，可能会允许非矩形或不连续区域。
-
问题内容： 我认为使用Flexbox无法实现这一点，因为每一行只能是适合其元素的最小高度，但是可以使用更新的CSS Grid来实现吗？ 明确地说，我希望网格中所有行的所有元素的高度相等，而不仅仅是每行。基本上，最高的“单元格”应规定所有单元格的高度，而不仅仅是其行中的单元格。 问题答案： 简短答案 如果目标是创建具有相等高度的行的网格，而网格中最高的单元格将设置所有行的高度，那么这是一种快速简单的
-
我认为使用Flexbox是不可能实现这一点的，因为每一行只能是适合其元素所需的最小高度，但使用较新的CSS网格可以实现这一点吗？ 明确地说，我希望网格中的所有元素在所有行上的高度相等，而不仅仅是每一行。基本上，最高的“单元格”应该指示所有单元格的高度，而不仅仅是其行中的单元格。
-
问题内容： 我正在尝试让我的粘性标头具有过渡效果，因此它不仅易于移动，而且易于释放。 我究竟做错了什么？ 基本上，以下代码将tiny类添加到我的包装器类中，这很好。 这是CSS部分： 所以标题确实会收缩，但是没有动画，我是否错过了某些东西，或者转换根本不适用于网格？ 这是css-grid文档的链接。 问题答案： 根据规范，过渡应该在和上进行。 7.2。 明确的轨道尺寸：和 属性 可动画的： 作为长
-
每一个网格项目都有一个矩形的网格区域，这个网格区域定义了该网格项的包含块，对齐属性（justify-self 和 align-self）确定其实际位置。 网格项占用的单元格也会影响网格的行和列的大小，参看网格尺寸（Grid Sizing）。 网格区域在网格内的位置通过1个网格位置和1个网格跨度属性来定义： grid position 表示网格项在网格中的位置。该属性可以是确定的（被显式定义）或自动
-
网格模板（grid-template）属性及其普通写法（longhands）定义了一个固定数量的轨道，构成显式网格。 当网格项目定位在这些界限之外，网格容器通过增加隐式网格线生成隐式网格轨道。 这些隐含的和显式的网格线一起构成隐式网格（implicit grid）。 隐式网格轨道的尺寸由网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）属性来确定。 网格自
-
网格模板区域（grid-template-areas）、网格模板行（grid-template-rows）和网格模板列（grid-template-columns），这3个属性共同显式定义了一个网格容器。而网格模板（grid-template）属性是一个用来同时设置这3个属性的速写（shorthand）。 grid items内容可能会超出显式网格，这时网格容器会自动生成隐式轨道（implicit