User:Ccsmith/common.css

.parent{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr; grid-template-areas: 'lds1 lds1 lds1 lds1' 'lds2 lds2 lds2 lds2' 'lds3 lds3 lds3 lds3' 'lds4 lds4 lds4 lds4' 'lds5 lds5 lds6 lds6' 'lds5 lds5 lds7 lds7' 'lds8 lds9 lds10 lds11' 'lds12 lds13 lds14 lds15'; }	grid-area:lds1; font-size:15px; text-align:center; background:red; } 	grid-area:lds2; font-size:17px; text-align:center; } 	grid-area:lds3; font-size:10px; text-align:center; } 	grid-area:lds4; font-size:12px; text-align:center; border-top:2px solid black; border-bottom:2px solid black; padding:12px; margin-bottom:12px; } .container{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr; grid-template-areas: 'lds5 lds5 lds6 lds6' 'lds5 lds5 lds7 lds7' 'lds8 lds9 lds10 lds11' 'lds12 lds13 lds14 lds15'; gap:12px }
 * 1) lds1{
 * 1) lds2{
 * 1) lds3{
 * 1) lds4{

grid-area:lds5; font-size:20px; background:red; } 	grid-area:lds6; font-size:20px; background:green; } 	grid-area:lds7; font-size:20px; background:yellow; } 	grid-area:lds8; } 	grid-area:lds9; } 	grid-area:lds10; } 	grid-area:lds11; }
 * 1) lds5{
 * 1) lds6{
 * 1) lds7{
 * 1) lds8{
 * 1) lds9{
 * 1) lds10{
 * 1) lds11{

grid-area:lds12; font-size:20px; } 	grid-area:lds13; font-size:20px; } 	grid-area:lds14; font-size:20px; } 	grid-area:lds15; font-size:20px; }
 * 1) lds12{
 * 1) lds13{
 * 1) lds14{
 * 1) lds15{