User:Ccsmith/common.css

.parent{ display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(4, 1fr); grid-template-areas: 'lds1 lds1 lds1 lds1' 'lds2 lds2 lds2 lds2' 'lds3 lds3 lds3 lds3'; }	grid-area:lds1; font-size:15px; text-align:center; } 	grid-area:lds2; font-size:17px; text-align:center; line-height:.9; } 	grid-area:lds3; font-size:10px; text-align:center; line-height:.3; } .container{ display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(4, 1fr); grid-template-areas: 'lds4 lds4 lds4 lds4';
 * 1) lds1{
 * 1) lds2{
 * 1) lds3{

}	grid-area:lds4; font-size:12px; text-align:center; background:red; border-top:2px solid black; border-bottom:2px solid black; } .container2{ display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(4, 1fr); grid-template-areas: 'lds5 lds5 lds6 lds6' 'lds5 lds5 lds7 lds7' 'lds8 lds9 lds10 lds11' 'lds12 lds13 lds14 lds15'; gap:1rem; }
 * 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; border:1px solid black; } 	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{

}