我目前正在布置仪表板Web应用程序，并决定使用嵌套网格。 这个想法是让网格显示27个原始数据和5个列。菜单（第一个子网格）应跨在第一列上，其余各列应包含第二个子网格，在第二个子网格中将显示内容。我们称之为主要部分。
注意：主要部分不一定需要27行。重要的是要在主部分的第1 2列上从顶部到底部均匀地分布3个网格区域。其余9个网格区域需要以3个为一组的形式显示在主要部分的其余列上。
问题： 1.但是，我设置的代码似乎菜单和主要部分之间的行不相等，并且无法理解原因。 2.尽管我正确设置了网格区域，但最后一个网格区域作为插槽也最终彼此重叠。
我尝试了什么： 1.将菜单设置为27 raws，并将主要部分设置为9。 2.将菜单和mainSection都设置为27行。 3.将插槽1分配到不同的行，以测试它如何与菜单对齐。 4.检查代码是否有任何错字。 5.沮丧的日子过后，我什至不记得其他细微的调整。如果我记得其中的任何内容，我都会跟进更新和答案。
有人可以结束我的沮丧吗？ ：（
PS：由于我在对移动设备进行编码（临时限制），因此HTML文件中包含CSS，但无法设置HTML来识别CSS文件。
下面的代码。 编辑：对不起，代码结构中的未对齐。我正在手机和平板电脑上编写g驱动器文件。看来，“ tab”键在两个移动平台之间的作用不同。
<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<!--<div id="appTitle">protoaccounting</div>-->
<body id="mainGrid">
<div id="menu">
<!--<div>-->
<div class="menu_Item" id="menu_home">
<div class="notify_img" id="homeLed">img</div>
<div class="title" id"homeText">Home</div>
<div class="submenu" id="homeSubmenu">items</div>
</div>
<div class="menu_Item" id="menu_input">
<div clss="notify_img" id="homeLed">img</div>
<div class="title" id"homeText">Input</div>
<div class="submenu" id="homeSubmenu">items</div>
</div>
<div class="menu_Item" id="menu_database">
<div clss="notify_img" id="homeLed">img</div>
<div class="title" id"homeText">Database</div>
<div class="submenu" id="homeSubmenu">items</div>
</div>
<div class="menu_Item" id="menu_currentMonth">
<div clss="notify_img" id="homeLed">img</div>
<div class="title" id"homeText">Current month</div>
<div class="submenu" id="homeSubmenu">items</div>
</div>
<div class="menu_Item" id="menu_previousMonth">
<div clss="notify_img" id="homeLed">img</div>
<div class="title" id"homeText">Previous month</div>
<div class="submenu" id="homeSubmenu">items</div>
</div>
<div class="menu_Item" id="menu_ato">
<div clss="notify_img" id="homeLed">img</div>
<div class="title" id"homeText">AllTimeOverview</div>
<div class="submenu" id="homeSubmenu">items</div>
</div>
<div class="menu_Item" id="menu_atelier">
<div clss="notify_img" id="homeLed">img</div>
<div class="title" id"homeText">Atelier</div>
<div class="submenu" id="homeSubmenu">items</div>
</div>
<div class="menuItem" id="investments">
<div clss="notify_img" id="homeLed">img</div>
<div class="title" id"homeText">Investments</div>
<div class="submenu" id="homeSubmenu">items</div>
</div>
<div class="menu_Item" id="futureNecesities">
<div clss="notify_img" id="homeLed">img</div>
<div class="title" id"homeText">Future Necesities</div>
<div class="submenu" id="homeSubmenu">items</div>
</div>
<!--</div>-->
</div>
<div id="mainSection">
<div id="slot1">SLOT1</div>
<div id="slot2">SLOT2</div>
<div id="slot3">SLOT3</div>
<div id="slot4">SLOT4</div>
<div id="slot5">SLOT5</div>
<div id="slot6">SLOT6</div>
<div id="slot4">SLOT7</div>
<div id="slot5">SLOT8</div>
<div id="slot6">SLOT9</div>
<div id="slot4">SLOT10</div>
<div id="slot5">SLOT11</div>
<div id="slot6">SLOT12</div>
</div>
</body>
<style>
body {
font-size: 1em;
background: silver;
}
* {
box-sizing: border-box;
}
#mainGrid {
border: 1px solid black;
display: grid;
grid-template-columns: repeat(5,[col] 20% );
}
#mainSection div {
border: 1px dotted black;
margin: 0;
text-align: center;
vertical-align: middle;
}
#menu {
grid-area: 1 / 1 / 9 / 2;
display: grid;
}
#menu div {
border: 1px dotted black;
text-align: center;
}
#mainSection {
grid-area: 1 / 2 / 9 / 6;
display: grid;
}
#menu_home {
grid-area: 1 / 1 / span 1 / span 1;
}
#menu_input {
grid-area: 4 / 1 / span 1 / span 1;
}
#menu_database {
grid-area: 7 / 1 / span 1 / span 1;
}
#menu_currentMonth {
grid-area: 10 / 1 / span 1 / span 1;
}
#menu_previousMonth {
grid-area: 13 / 1 / span 1 / span 1;
}
#menu_ato {
grid-area: 16 / 1 / span 1 / span 1;
}
#menu_atelier {
grid-area: 19 / 1 / span 1 / span 1;
}
#investments {
grid-area: 22 / 1 / span 1 / span 1;
}
#futureNecesities {
grid-area: 25 / 1 / span 1 / span 1;
}
/*mainSection area*/
#slot1 {
/*grid-area: mSlot1;*/
grid-area: 1 / 1 / span 3 / span 2;
}
#slot2 {
/*grid-area: mSlot1;*/
grid-area: 1 / 3 / span 1 / span 2;
}
#slot3 {
/*grid-area: mSlot1;*/
grid-area: 2 / 3 / span 1 / span 2;
}
#slot4 {
/*grid-area: mSlot1;*/
grid-area: 3 / 3 / span 1 / span 2;
}
#slot5 {
/*grid-area: mSlot1;*/
grid-area: 4 / 1 / span 3 / span 2;
}
#slot6 {
/*grid-area: mSlot1;*/
grid-area: 4 / 3 / span 1 / span 2;
}
#slot7 {
/*grid-area: mSlot1;*/
grid-area: 5 / 3 / span 1 / span 2;
}
#slot8 {
/*grid-area: mSlot1;*/
grid-area: 6 / 3 / span 1 / span 2;
}
#slot9 {
/*grid-area: mSlot1;*/
grid-area: 7 / 1 / span 3 / span 2;
}
#slot10 {
/*grid-area: mSlot1;*/
grid-area: 7 / 3 / span 1 / span 2;
}
#slot11 {
/*grid-area: mSlot1;*/
grid-area: 8 / 3 / span 1 / span 2;
}
#slot12{
/*grid-area: mSlot1;*/
grid-area: 9 / 3 / span 1 / span 2;
}
</style>
</html>