CSS 个网格单元的不同高度
Different height of CSS grid cells
如何提升 "content" 和 "right" 块响应?问题是我不能使用子嵌套网格。我不需要 hacks:没有 margin-top 因为 header 可以有不同的高度。没有javascript。只纯CSS。如果可能的话。
现在我的标记如下所示:
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
}
.right {
grid-area: right;
background: yellow;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<header class="header">header</header>
<aside class="aside">aside</aside>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
您可以使用这种东西 (margin-top) 将内容移动到更靠近 header 的位置。如果这改变了移动设备上的视图并使其变得混乱,您将需要根据设备创建 2 个视图,并为不同的设备使用不同的 css 值。
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
margin-top: -50px;
}
.right {
grid-area: right;
background: yellow;
margin-top: -50px;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<header class="header">header</header>
<aside class="aside">aside</aside>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
检查这个
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
float: left;
}
.right {
grid-area: right;
background: yellow;
float: right;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<div id="left-side">
<aside class="aside">aside</aside>
<div class="left">left</div>
</div>
<div id="right-side">
<header class="header">header</header>
<div id="right-side2">
<div class="content">content</div>
<div class="right">right</div>
</div>
</div>
</div>
一个解决方案(仅使用 CSS)是在 grid-template-areas:
中添加另一行
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"aside content right"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height:30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
}
.right {
grid-area: right;
background: yellow;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<header class="header">header</header>
<aside class="aside">aside</aside>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
如何提升 "content" 和 "right" 块响应?问题是我不能使用子嵌套网格。我不需要 hacks:没有 margin-top 因为 header 可以有不同的高度。没有javascript。只纯CSS。如果可能的话。
现在我的标记如下所示:
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
}
.right {
grid-area: right;
background: yellow;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<header class="header">header</header>
<aside class="aside">aside</aside>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
您可以使用这种东西 (margin-top) 将内容移动到更靠近 header 的位置。如果这改变了移动设备上的视图并使其变得混乱,您将需要根据设备创建 2 个视图,并为不同的设备使用不同的 css 值。
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
margin-top: -50px;
}
.right {
grid-area: right;
background: yellow;
margin-top: -50px;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<header class="header">header</header>
<aside class="aside">aside</aside>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
检查这个
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
float: left;
}
.right {
grid-area: right;
background: yellow;
float: right;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<div id="left-side">
<aside class="aside">aside</aside>
<div class="left">left</div>
</div>
<div id="right-side">
<header class="header">header</header>
<div id="right-side2">
<div class="content">content</div>
<div class="right">right</div>
</div>
</div>
</div>
一个解决方案(仅使用 CSS)是在 grid-template-areas:
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"aside content right"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height:30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
}
.right {
grid-area: right;
background: yellow;
}
.left, .content, .right {
height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
<!-- this order should be on mobile -->
<header class="header">header</header>
<aside class="aside">aside</aside>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>