通过网格命名布局和第n个子选择器css嵌套的网格布局
一切都还好。但是当我想进行嵌套布局import React from "react";
import { Card } from "@material-ui/core";
function Child({ list }) {
return (
<div>
{list.map((value, index) => {
return (
<>
<br />
<Card
style={{ marginTop: "3px", margin: "0px auto", width: "200px" }}
>
Double of {value} is {value * 2}
</Card>
</>
);
})}
</div>
);
}
export default Child;
时。它完全崩溃了。
div.main:nth-child(2n+number)
*,
*::after,
*::before {
box-sizing: border-box;
}
.header {
grid-area: header;
}
.subheader {
grid-area: subheader;
}
.box-1 {
grid-area: box-1;
}
.box-2 {
grid-area: box-2;
}
.box-3 {
grid-area: box-3;
}
.leftbox {
grid-area: leftbox;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header ' 'box-1 box-1 leftbox ' 'box-2 box-3 leftbox ' '. subheader .' 'main main main ' '. . footer ';
grid-template-rows: repeat(3, minmax(50px, min-content));
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.main .first {
grid-area: first;
background: rgba(248, 248, 2, 0.116);
border: 5px solid rgb(251, 255, 0);
}
.main .third {
grid-area: third;
background: rgba(38, 0, 255, 0.171);
border: 5px solid rgb(4, 0, 255);
}
.main .second {
grid-area: second;
background: rgba(248, 2, 2, 0.034);
border: 5px solid rgb(255, 0, 0);
}
.grid-container div.main {
display: grid;
min-height: 100px;
grid-gap: 10px;
padding: 10px;
}
div.main:nth-child(2n+1) {
grid-template-areas: 'first second second third third';
}
div.main:nth-child(2n+2) {
grid-template-areas: 'first first second third third';
}
div.main:nth-child(2n+3) {
grid-template-areas: 'first first second second third';
}
它也可以在Codepen上使用:enter link description here
答案 0 :(得分:1)
这是因为要在称为.main
的同一区域内添加所有main
元素。不要使用区域来简化代码,如下所示:
* {
box-sizing: border-box;
}
.header {
grid-column:span 3;
}
.subheader {
grid-column: 2;
}
.box-1 {
grid-column:span 2;
}
.leftbox {
grid-column:3;
grid-row:2/span 2;
}
.main {
grid-column:span 3;
}
.footer {
grid-column: 3;
}
.grid-container {
display: grid;
grid-auto-rows: minmax(50px, min-content);
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.main .first {
background: rgba(248, 248, 2, 0.116);
border: 5px solid rgb(251, 255, 0);
}
.main .third {
background: rgba(38, 0, 255, 0.171);
border: 5px solid rgb(4, 0, 255);
}
.main .second {
background: rgba(248, 2, 2, 0.034);
border: 5px solid rgb(255, 0, 0);
}
.grid-container div.main {
display: grid;
min-height: 100px;
grid-gap: 10px;
padding: 10px;
}
div.main:nth-child(3n+1) {
grid-template-columns: 1fr 2fr 2fr;
}
div.main:nth-child(3n+2) {
grid-template-columns: 2fr 1fr 2fr;
}
div.main:nth-child(3n+3) {
grid-template-columns: 2fr 2fr 1fr;
}
<h1>Grid Layout</h1>
<div class="grid-container">
<div class="header">Header</div>
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
<div class="box-3">box-3</div>
<div class="leftbox">leftbox</div>
<div class="subheader">Sub Header</div>
<div class="main">
<div class="first">First</div>
<div class="second">First</div>
<div class="third">First</div>
</div>
<div class="main">
<div class="first">Second</div>
<div class="second">Second</div>
<div class="third">Second</div>
</div>
<div class="main">
<div class="first">Third</div>
<div class="second">Third</div>
<div class="third">Third</div>
</div>
<div class="footer">Result</div>
</div>
答案 1 :(得分:0)
*,
*::after,
*::before {
box-sizing: border-box;
}
.header {
grid-area: header;
}
.subheader {
grid-area: subheader;
}
.box-1 {
grid-area: box-1;
}
.box-2 {
grid-area: box-2;
}
.box-3 {
grid-area: box-3;
}
.leftbox {
grid-area: leftbox;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas:
'header header header '
'box-1 box-1 leftbox '
'box-2 box-3 leftbox '
'. subheader .'
'main main main '
'. . footer ';
grid-template-rows: repeat(3, minmax(50px, min-content));
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
div.main div.sub-container .first {
grid-area: first;
background: rgba(248, 248, 2, 0.116);
border: 5px solid rgb(251, 255, 0);
}
div.main div.sub-container .second {
grid-area: second;
background: rgba(248, 2, 2, 0.034);
border: 5px solid rgb(255, 0, 0);
}
div.main div.sub-container .third {
grid-area: third;
background: rgba(38, 0, 255, 0.171);
border: 5px solid rgb(4, 0, 255);
}
div.main div.sub-container:nth-child(2n+1) {
grid-template-areas:
'first second second third third';
}
div.main div.sub-container:nth-child(2n+2) {
grid-template-areas:
'first first second third third';
}
div.main div.sub-container:nth-child(2n+3) {
grid-template-areas:
'first first second second third';
}
div.main div.sub-container{
display: grid;
}
.grid-container div.main {
display: grid;
min-height: 100px;
grid-gap: 10px;
padding: 10px;
}
<h1>Grid Layout</h1>
<div class="grid-container">
<div class="header">Header</div>
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
<div class="box-3">box-3</div>
<div class="leftbox">leftbox</div>
<div class="subheader">Sub Header</div>
<div class="main">
<div class="sub-container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
<div class="sub-container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
<div class="sub-container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
</div>
<div class="footer">Result</div>
</div>