相关疑难解决方法(0)
网格模板区域 - 属性值无效
我尝试搜索 Stack Overflow、mozilla 文档和 CSS 技巧来找出为什么我的 grid-template-areas 总是收到无效的属性值，但无法弄清楚。有人可以指出为什么我收到此错误消息以及我做错了什么吗？
我正在尝试创建一个计算器。为此，我尝试创建网格单元以将运算符和关键数字输入其中。
提前致谢。
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
#gridContainer {
border: 1px solid black;
display: grid;
grid-template-columns: 4rem 4rem 4rem 4rem;
grid-template-rows: 6rem 6rem 6rem 6rem 6rem 6rem;
grid-template-areas:
"s s s s"
"o o o o"
"n n n o"
"n n n o"
"n n n o"
"z z d c";
}<html>
<body>
<div id="gridContainer"> …推荐指数
解决办法
查看次数
如何在不更改html代码的情况下更改元素的顺序？
这些是3 inline-block和元素,这意味着它们将彼此相邻排序.
这是一个观看现场活动的小提琴:https://jsfiddle.net/8mdm8eox/
.wrapper {
background: #fff;
width: 100%
}
.firstElement,
.secondElement,
.thirdElement {
display: inline-block;
width: calc(100%/3)
}
.firstElement {
background: #000;
color: #fff
}
.secondElement {
background: grey
}
.thirdElement {
background: #ddd
}
@media (max-width: 767px) {}<div class="wrapper">
<div class="firstElement">First Element</div>
<div class="secondElement">Second Element</div>
<div class="thirdElement">Third Element</div>
</div>所以这就是我想要的,我想在屏幕宽度为767px或更低时:
@media (max-width: 767px){}
前两个元素是垂直排序的,第三个元素是与另外两个元素水平排序的,所以它们变成了:
_______________ ________________
|First Element| |? |
_______________ | |
|Third Element |
________________ | |
|Second Element| | | …推荐指数
解决办法
查看次数
CSS 网格：网格行/列开始/结束 VS 网格区域 + 网格模板区域
我一直在阅读CSS Tricks 上的CSS 网格教程，但一个基本方面让我有点困惑。
似乎有两种方法可以确定网格项跨越多少个单元格：
grid-template-areagrid-area使用为具有属性的网格项指定的名称- 使用
grid-column-start/end和grid-row-start/end
看看下面的测试代码，似乎 的大小grid items是按以下顺序决定的（其中左侧的值覆盖右侧的值）：
grid-row/column-start/end>>grid-template-area物品本身的尺寸
问题
- 我的上述顺序通常是正确的吗？
- 是否有指定大小
grid items（即它们跨越多少个单元格）的首选方法（上面的 1 或 2）？
代码
.container {
display: grid;
border: 1px solid green;
grid-template-columns: 120px 120px 120px;
grid-template-rows: 120px 120px 120px;
grid-template-areas: "item-1 item-1 item-2" "item-3 item-4 item-4" "item-5 item-6 .";
}
.item-1 {
border: 1px solid blue !important;
grid-area: item-1;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 1;
}
.item-2 { …推荐指数
解决办法
查看次数
如何在样式组件中使用网格模板区域与反应？
我正在尝试制作一个网格，在其中定义区域，但网格布局在屏幕上不起作用。我不确定如何调试它。在我看来，我已经正确地定义了一切。我缺少什么？
const GridLayout = styled.div`
height: 100vh;
display: grid;
grid-template-areas:
'nav nav nav'
'aside main aside'
'footer footer footer';
grid-template-rows: 1fr 9fr 1fr;
grid-template-columns: 1fr 6fr 1fr;
`;
const Nav = styled.nav`
grid-area: nav;
`;
const Aside = styled.aside`
grid-area: aside;
`;
const Main = styled.main`
grid-area: main;
`;
const Footer = styled.footer`
grid-area: footer;
`;
function App() {
return (
<>
<GlobalStyle globalProps={globalProps} />
<ThemeProvider theme={theme}>
<GridLayout>
<Nav>Nav Area</Nav>
<Aside />
<Main>Main area</Main>
<Aside />
<Footer>Footer area</Footer>
</GridLayout>
</ThemeProvider> …推荐指数
解决办法
查看次数
在网格模板区域中使用重复，而不必重复网格单元名称
在 CSS 网格中使用 grid-template-areas 时，我想要一个跨越整个宽度的标题。是的，我可以使用 repeat( 12, 1fr) 定义模板网格列，但我正在寻找一种使用它的方法，而不必将列的名称写入 12 次。见下文。
grid-template-areas:
"article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero"
"header header header header header header header header header header header header"
"main main main main main main main main main aside aside aside"
"footer footer footer footer footer footer footer footer footer footer footer footer";
第一行有 'article-hero 写了 12 次，有没有办法使用重复，这样我就可以做repeat(12,article-hero)而不是写 12 次？
推荐指数
解决办法
查看次数
Why are CSS named grid areas not in quotes?
According to the spec, the value for grid-area is grid-line, which further uses custom-ident. Then MDN states that identifies cannot be put between quotes, which will make it a string value, which by itself is reasonable.
But adding these all up, named grid areas must be accessed via an ID without quotes. See the comparison in the example below:
.grid {
display:grid;
grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}
.foo {
/* this works …推荐指数
解决办法
查看次数
css grid-template-areas属性未对齐网格项
我是css网格的新手,我正在尝试使用这种布局构建一个页面:
我遇到的问题是.main容器网格中的类和网格.
我想我的网格设置错误了.main.
对于上层容器.container,我可以看到三列布局正在工作.
在第一行,我希望div图像div跨越三列中的两列,而blogart div则占据一列.
第二行应该有三个blogart div,每个divs一个列.
但是在内部网格中.main,所有标记都在第四列中.
我已经设置了一个codepen非常适合任何建议.
这是我的标记,css在codepen中:
body {
padding-top: 20px;
background: #f5f7f8;
}
.container{
display: grid;
width: 100%;
max-width: 750px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px 180px 80px;
grid-gap: 20px;
grid-template-areas: "header header header"
"main main main"
"footer footer footer";
}
.container div{
color: white;
font-size: 20px;
padding: 20px;
}
.header {
background: #b03532;
grid-area: header;
}
.main {
background: #33a8a5;
grid-area: main; …推荐指数
解决办法
查看次数
使用网格模板区域/命名区域重叠网格项目
我正在尝试使用CSS网格,这就是我正在构建的布局:
.grid {
display: grid;
align-items: center;
grid-template-columns: 1fr 4rem 1fr;
grid-template-rows: 1rem 1fr 1rem;
max-width: 900px;
margin: 0 auto;
}
.text {
/*
// Ideally, this should be
grid-area: text
*/
grid-column: 1 / 3;
grid-row: 2 / 3;
/* Fix z-index */
position: relative;
padding: 4rem;
background-color: #fff;
}
.image {
/*
// Ideally, this should be
grid-area: image;
*/
grid-column: 2 / 4;
grid-row: 1 / -1;
background-color: lightgray;
padding: 1rem;
/* Center das image */
display: …推荐指数
解决办法
查看次数
使用CSS网格重新排序项目
到目前为止，我已经开始使用CSS Grid迈出第一步了，之前使用Bootstrap plus Javascript编写了网格。我想从一开始就知道非常简单，如果我知道如何做的话。
假设我有一些这样的HTML：
<div class="container">
<div id="a">Blah</div>
<div id="b">Blurgh</div>
</div>
- 在桌面上，我想要2列布局，左侧的块a，右侧的块b。
- 在移动设备上（使用媒体查询），我想要一列，而块b在块a上方（因此，超出正常顺序）。
那我该怎么办？
推荐指数
解决办法
查看次数