所以我在使用以下 CSS 时遇到了问题:
const Content = styled("div")`
grid-area: main;
background-color: white;
margin-top: 5px;
margin-left: 20px;
margin-right: 20px;
display: grid;
grid-template-areas:
"contentHeader contentHeader contentHeader"
"contentItem contentItem contentItem"
"contentItem contentItem contentItem";
/* grid-template-columns: 1fr; */
/* grid-auto-columns: 33px;
grid-auto-rows: 150px; */
grid-gap: 10px;
`;
const ContentHeader = styled("h1")`
grid-area: contentHeader;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 40px;
color: black;
`;
const ContentMain = styled("div")`
grid-column: 1fr;
grid-row: 1fr;
background-color: red;
`;
我的目标是在左上角有标题的布局,然后是两行。
第一行将有两列,第一项将大于第二项。第二行将有一项填满两列。
相反,我得到了这个:
我知道这个问题很可能在我的grid-column
行中,但如果有人能指出我正确的方向,那就太好了。另外,我不明白为什么我的标题和彩色网格项目之间有很大的差距?
谢谢!