revision:
code:
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
</div>
</div>
<style>
.wrapper { display: grid; gap: 10px; grid-template-columns: 150px 100px 150px 100px ;
grid-template-rows: repeat(3,minmax(100px,auto)); background-color: lightgrey;
color: #444;}
.box { background-color: skyblue; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box .box { background-color: lightgreen; color: #444;}
.a {grid-column: 1 / 3; }
.b {grid-column: 4 ; }
.c {grid-column: 1; grid-row: 2 / 4;}
.d{ grid-column: 2 / 5; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid;
grid-template-rows: subgrid;}
.e {grid-row: 1 / 3; grid-column: 1 ; }
.f { grid-row: 1; grid-column: 2 / 4; }
.g { grid-row: 2; grid-column: 3;}
</style>
code:
<div class="wrapper1">
<div class="box1 a1">A</div>
<div class="box1 b1">B</div>
<div class="box1 c1">C</div>
<div class="box1 d1">
<div class="box1 e1">E</div>
<div class="box1 f1">F</div>
<div class="box1 g1">G</div>
</div>
</div>
<style>
.wrapper1 { display: grid; gap: 10px; grid-template-columns: [main-1] 150px [main-2] 100px [main-3]
150px [main-4] 100px [main-5] ; grid-template-rows: repeat(3,minmax(100px,auto));
background-color: lightgrey; color: #444; width: 40vw; height: 30vw;}
.box1 {background-color: skyblue; color: #000; border-radius: 5px; padding: 20px; font-size: 150%;}
.box1 .box1 {background-color: lightgreen; color: #444;}
.a1 {grid-column: main-1 / main-3;}
.b1 {grid-column: main-4 ;}
.c1 {grid-column: main-1;grid-row: 2 / 4; }
.d1 {gap: 10px; grid-column: main-2 / main-5; grid-row: 2 / 4; display: grid;
grid-template-columns: subgrid; grid-template-rows: subgrid;}
.e1 { grid-row: 1 / 3; grid-column: main-2 ;}
.f1 { grid-row: 1; grid-column: main-3 / main-5; }
.g1 { grid-row: 2; grid-column: main-4;}
</style>
code:
<div class="wrapper2">
<div class="box2 a2">A</div>
<div class="box2 b2">B</div>
<div class="box2 c2">C</div>
<div class="box2 d2">
<div class="box2 e2">E</div>
<div class="box2 f2">F</div>
<div class="box2 g2">G</div>
</div>
</div>
<style>
.wrapper2 {display: grid; gap: 10px; grid-template-columns: 150px 100px 150px 100px ;
grid-template-rows: repeat(3,minmax(100px,auto)); background-color: lightgrey;
color: #444; width: 40vw; height: 30vw;}
.box2 {background-color: skyblue; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box2 .box2 { background-color: lightgreen;color: #444;}
.a2 { grid-column: 1 / 3;}
.b2 { grid-column: 4 ;}
.c2 { grid-column: 1; grid-row: 2 / 4;}
.d2 { grid-column: 2 / 5; grid-row: 2 / 4; display: grid; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: subgrid; }
.e2 { grid-row: 1 / 3; grid-column: 1 ; }
.f2 { grid-row: 1; grid-column: 2 / 4; }
.g2 { grid-row: 2; grid-column: 3;}
</style>
code:
<div class="grid_A">
<div class="wrapper3">
<div class="box3 a3">A</div>
<div class="box3 b3">B</div>
<div class="box3 c3">C</div>
<div class="box3 d3">
<div class="box3 e3">E</div>
<div class="box3 f3">F</div>
<div class="box3 g3">G</div>
<div class="box3 h3">H</div>
<div class="box3 i3">I</div>
</div>
</div>
<style>
.wrapper3 {display: grid; gap: 10px; grid-template-columns: 150px 100px 150px 100px ;
grid-template-rows: repeat(3,minmax(100px,auto)); background-color: lightgrey;
color: #444; width: 40vw; height: 30vw;}
.box3 {background-color: skyblue; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box3 .box3 { background-color: lightgreen;color: #444;}
.a3 { grid-column: 1 / 3;}
.b3 { grid-column: 4 ;}
.c3 { grid-column: 1; grid-row: 2 / 4;}
.d3 { grid-column: 2 / 5; grid-row: 2 / 4; display: grid; row-gap: 0;
grid-template-columns: subgrid; grid-template-rows: subgrid; }
</style>
code:
<div class="wrapper4">
<div class="box4 a4">A</div>
<div class="box4 b4">B</div>
<div class="box4 c4">C</div>
<div class="box4 d4">
<div class="box4 e4">E</div>
<div class="box4 f4">F</div>
<div class="box4 g4">G</div>
<div class="box4 h4">H</div>
<div class="box4 i4">I</div>
<div class="box4 j4">J</div>
<div class="box4 k4">K</div>
<div class="box4 l4">L</div>
<div class="box4 m4">M</div>
</div>
</div>
<style>
.wrapper4 {display: grid; gap: 10px; grid-template-columns: 150px 100px 150px 100px ;
grid-template-rows: repeat(3,minmax(100px,auto)); background-color: lightgrey;
color: #444; width: 40vw; height: 30vw;}
.box4 {background-color: skyblue; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box4 .box4 { background-color: lightgreen;color: #444;}
.a4 { grid-column: 1 / 3;}
.b4 { grid-column: 4 ;}
.c4 { grid-column: 1; grid-row: 2 / 4;}
.d4 { grid-column: 2 / 5; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid;
grid-template-rows: subgrid; }
</style>
code:
<div class="wrapper5">
<div class="box5 a5">A</div>
<div class="box5 b5">B</div>
<div class="box5 c5">C</div>
<div class="box5 d5">
<div class="box5 e5">E</div>
<div class="box5 f5">F</div>
<div class="box5 g5">G</div>
<div class="box5 h5">H</div>
<div class="box5 i5">I</div>
<div class="box5 j5">J</div>
<div class="box5 k5">K</div>
</div>
</div>
<style>
.wrapper5 {display: grid; gap: 10px; grid-template-columns: 150px 100px 150px 100px ;
grid-template-rows: repeat(3,minmax(100px,auto)); background-color: lightgrey;
color: #444; width: 40vw; height: 30vw;}
.box5 {background-color: skyblue; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box5 .box5 { background-color: lightgreen;color: #444;}
.a5 { grid-column: 1 / 3;}
.b5 { grid-column: 4 ;}
.c5 { grid-column: 1; grid-row: 2 / 4;}
.d5 { grid-column: 2 / 5; grid-row: 2 / 4; display: grid;
grid-template-columns: subgrid;}
</style>
code:
<div class="wrapper6">
<div class="box6 a6">A</div>
<div class="box6 b6">B</div>
<div class="box6 c6">C</div>
<div class="box65 d6">
<div class="box6 e6">E</div>
<div class="box6 f6">F</div>
<div class="box6 g6">G</div>
</div>
</div>
<style>
.wrapper6 {display: grid; gap: 10px; grid-template-columns: [main-1] 150px [main-2] 100px
[main-3] 150px [main-4] 100px [main-5]; grid-template-rows: repeat(3,minmax(100px,auto));
background-color: lightgrey; color: #444; width: 40vw; height: 30vw;}
.box6 {background-color: skyblue; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box6 .box6 { background-color: lightgreen;color: #444;}
.a6 { grid-column: main-1 / main-3;}
.b6 { grid-column: main-4 ;}
.c6 { grid-column: main-1; grid-row: 2 / 4;}
.d6 { gap: 10px; grid-column: main-2 / main-5; grid-row: 2 / 4; display: grid;
grid-template-columns: subgrid [sub-1] [sub-2] [sub-3] [sub-4]; grid-template-rows: subgrid;}
.e6 {grid-row: 1 / 3; grid-column: sub-1; }
.f6 {grid-row: 1 ; grid-column: sub-2 / main-5; }
.g6 {grid-row: 2; grid-column: main-4; }
</style>
code:
<div class="grid_A">
<div class="wrapper7">
<div class="box7 a7">A</div>
<div class="box7 b7">B</div>
<div class="box7 c7">C</div>
<div class="box7 d7">
<div class="box7 e7">E</div>
<div class="box7 f7">F</div>
<div class="box7 g7">G</div>
</div>
</div>
<style>
.wrapper7 {display: grid; gap: 10px; grid-template-columns: 150px 100px 150px 100px;
grid-template-rows: repeat(3,minmax(100px,auto)); background-color: lightgrey;
color: #444; width: 40vw; height: 30vw;}
.box7 {background-color: skyblue; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box7 .box7 { background-color: lightgreen;color: #444;}
.a7 { grid-column: 1 / 3;}
.b7 { grid-column: 4 ;}
.c7 { grid-column: 1; grid-row: 2 / 4;}
.d7 { padding: 50px; grid-column: 2 / 5; grid-row: 2 / 4; display: grid;
grid-template-columns: subgrid; grid-template-rows: subgrid;}
.e7 {grid-row: 1 / 3; grid-column: 1; }
.f7 {grid-row: 1 ; grid-column: 2 / 5; }
.g7 {grid-row: 2; grid-column: 4; }
</style>
code:
<div class="wrapper8">
<div class="box8 a8">A</div>
<div class="box8 b8">B</div>
<div class="box8 c8">C</div>
<div class="box8 d8">
<div class="box8 e8">E</div>
<div class="box8 f8">F</div>
<div class="box8 g8">G</div>
</div>
</div>
<style>
.wrapper8 {display: grid; gap: 10px; grid-template-columns: 150px 100px 150px 100px;
grid-template-rows: repeat(3,minmax(100px,auto)); background-color: lightgrey;
color: #444; width: 40vw; height: 30vw;}
.box8 {background-color: skyblue; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box8 .box8 { background-color: lightgreen;color: #444;}
.a8 { grid-column: 1 / 3;}
.b8 { grid-column: 4 ;}
.c8 { grid-column: 1; grid-row: 2 / 4;}
.d8 { margin: 30px; grid-column: 2 / 5; grid-row: 2 / 4; display: grid;
grid-template-columns: subgrid; grid-template-rows: subgrid;}
.e8 {grid-row: 1 / 3; grid-column: 1; }
.f8 {grid-row: 1 ; grid-column: 2 / 5; }
.g8 {grid-row: 2; grid-column: 4; }
</style>