.grid-container-1{display:grid;grid-gap:10px;background-color:#333;padding:1px;margin:10px;grid-template-areas:'header header header header header header' 'left section section section section right' 'footer footer footer footer footer footer'}.grid-item{position:relative;background:#97ff99;border:1px solid #333;text-align:center!important;padding:10px!important;display:flex;justify-content:center;align-items:center}.grid-item:before,.grid-item:after{position:absolute;font-size:12px;color:#00000075}.grid-container-2{display:grid;margin:-10px!important;border:1px solid #999}.grid-container-3{display:inline-grid;margin:-10px!important;margin-right:0!important;border:1px solid #999}.grid-container-3-1{display:inline-grid;margin:-10px!important;margin-left:0!important;border:1px solid #999}.grid-container-4{display:grid;grid-template-columns:20% 60% 20%;grid-template-rows:auto auto;margin:-10px!important;padding-right:10px!important;grid-gap:5px;background:#333}.grid-container-4 .grid-item{height:50px}.grid-container-4 .grid-item:nth-child(1):after,.grid-container-4 .grid-item:nth-child(4):after{content:'auto';left:-7px;transform:rotate(-90deg)}.grid-container-4 .grid-item:nth-child(4):before,.grid-container-4 .grid-item:nth-child(5):before,.grid-container-4 .grid-item:nth-child(6):before{bottom:-2px}.grid-container-4 .grid-item:nth-child(4):before{content:'20%'}.grid-container-4 .grid-item:nth-child(5):before{content:'60%'}.grid-container-4 .grid-item:nth-child(6):before{content:'20%'}.grid-container-5{display:grid;grid-template-columns:auto auto auto;grid-template-rows:50px 100px 100px;margin:-10px!important;grid-gap:5px;background:#333}.grid-container-5 .grid-item:nth-child(1):after{content:'50px';left:-5px;transform:rotate(-90deg)}.grid-container-5 .grid-item:nth-child(4):after,.grid-container-5 .grid-item:nth-child(7):after{content:'100px';left:-7px;transform:rotate(-90deg)}.grid-container-5 .grid-item:nth-child(7):before,.grid-container-5 .grid-item:nth-child(8):before,.grid-container-5 .grid-item:nth-child(9):before{content:'(column : auto)';bottom:-2px}.grid-container-6{display:grid;grid-template-columns:auto auto auto;margin:-10px!important;background:#333;grid-gap:5px}.grid-container-6 .grid-item:first-child{grid-column:1 / span 2;background:#bdd8f5;color:#333}.grid-container-6 .grid-item:first-child:before{content:'col-span : 2';margin-top:35px}.grid-container-7{display:grid;grid-template-columns:auto auto auto;margin:-10px!important;background:#333;grid-gap:5px}.grid-container-7 .grid-item:first-child{grid-row:1 / span 2;background:#bdd8f5;color:#333}.grid-container-7 .grid-item:first-child:before{content:'row-span : 2';left:-25px;transform:rotate(-90deg)}.grid-container-8{display:grid;grid-template-columns:auto auto auto auto;margin:-10px!important;background:#333;grid-gap:5px}.grid-container-8 .grid-item:first-child{grid-area:2 / 1 / span 2 / span 3;border:2px solid #333;background:#bdd8f5}.grid-container-8 .grid-item:first-child:before{content:'row-span : 2';left:-25px;transform:rotate(-90deg)}.grid-container-8 .grid-item:first-child:after{content:'col-span : 2';margin-top:80px}.grid-container-cell,.grid-container-columns,.grid-container-rows,.grid-container-gaps,.grid-container-lines{display:grid;grid-template-columns:auto auto auto;grid-gap:20px;margin:70px 50px;background:#333}.grid-container-rows,.grid-container-gaps,.grid-container-lines{margin:50px 50px 50px 80px}.grid-container-cell .grid-item{height:10vw}.grid-container-cell .grid-item:nth-child(5){background:#bdd8f5}.grid-container-cell .grid-item:nth-child(5):after{content:'A Grid Cell';color:#333}.grid-container-columns .grid-item{height:10vw}.grid-container-columns .grid-item:nth-child(2),.grid-container-columns .grid-item:nth-child(5),.grid-container-columns .grid-item:nth-child(8){background:#bdd8f5}.grid-container-columns .grid-item:nth-child(1):before,.grid-container-columns .grid-item:nth-child(2):before,.grid-container-columns .grid-item:nth-child(3):before{content:'Column';margin:-1px;top:-40px;padding:10px;color:#333;border-left:2px solid #333;border-right:2px solid #333;display:block;right:0;left:0}.grid-container-columns .grid-item:nth-child(4):before,.grid-container-columns .grid-item:nth-child(5):before,.grid-container-columns .grid-item:nth-child(6):before{content:'';margin:-1px;padding:20px;color:#333;border-left:2px solid #333;border-right:2px solid #333;display:block;right:0;left:0;z-index:1000;height:calc(300% + 30px)}.grid-container-rows .grid-item{height:10vw}.grid-container-rows .grid-item:nth-child(4),.grid-container-rows .grid-item:nth-child(5),.grid-container-rows .grid-item:nth-child(6){background:#bdd8f5}.grid-container-rows .grid-item:nth-child(1):before,.grid-container-rows .grid-item:nth-child(4):before,.grid-container-rows .grid-item:nth-child(7):before{content:'Row';line-height:calc(10vw - 4px);margin:-1px;top:0;bottom:0;left:-43px;padding:0 10px;color:#333;border-top:2px solid #333;border-bottom:2px solid #333;display:block;z-index:1000}.grid-container-rows .grid-item:nth-child(2):before,.grid-container-rows .grid-item:nth-child(5):before,.grid-container-rows .grid-item:nth-child(8):before{content:'';margin:-1px;top:0;bottom:0;width:calc(300% + 60px);color:#333;border-top:2px solid #333;border-bottom:2px solid #333;display:block;z-index:1000}.grid-container-gaps .grid-item{height:10vw}.grid-container-gaps .grid-item:nth-child(1):after,.grid-container-gaps .grid-item:nth-child(2):after{content:'Column Gap';white-space:pre;margin:-1px;top:-40px;padding:10px;color:#333;display:block;right:0;transform:translateX(calc(50% + 10px))}.grid-container-gaps .grid-item:nth-child(4):after,.grid-container-gaps .grid-item:nth-child(5):after,.grid-container-gaps .grid-item:nth-child(6):after{content:'';margin:-1px;padding:20px;border-left:2px solid #333;border-right:2px solid #333;display:block;right:0;left:0;z-index:1000;height:calc(300% + 30px)}.grid-container-gaps .grid-item:nth-child(1):before,.grid-container-gaps .grid-item:nth-child(4):before{content:'Row Gap';white-space:pre;display:block;color:#333;margin:-1px;bottom:-20px;left:-63px;padding:0 10px;z-index:1000}.grid-container-gaps .grid-item:nth-child(2):before,.grid-container-gaps .grid-item:nth-child(5):before,.grid-container-gaps .grid-item:nth-child(8):before{content:'';margin:-1px;top:0;bottom:0;width:calc(300% + 70px);border-top:2px solid #333;border-bottom:2px solid #333;display:block;z-index:1000}.grid-container-gaps .grid-item:nth-child(1):before,.grid-container-gaps .grid-item:nth-child(2):before{border-top:none}.grid-container-gaps .grid-item:nth-child(7):before,.grid-container-gaps .grid-item:nth-child(8):before{border-bottom:none}.grid-container-gaps .grid-item:nth-child(1):after,.grid-container-gaps .grid-item:nth-child(4):after{border-left:none}.grid-container-gaps .grid-item:nth-child(3):after,.grid-container-gaps .grid-item:nth-child(6):after{border-right:none}.grid-container-lines{position:relative;padding:20px;margin-top:80px;background:none}.grid-container-lines:before{content:'Column Lines';white-space:pre;font-weight:700;position:absolute;display:block;top:-60px;width:max-content;margin:0 50%;transform:translateX(-50%)}.grid-container-lines:after{content:'Row Lines';white-space:pre;font-weight:700;position:absolute;display:block;top:50%;left:-100px;transform:translateY(-50%) rotate(-90deg)}.grid-container-lines .grid-item{height:10vw}.grid-container-lines .grid-item:nth-child(4):after,.grid-container-lines .grid-item:nth-child(6):after{content:'';padding:20px;margin:-11px;border-left:2px solid red;border-right:2px solid red;display:block;right:0;left:0;z-index:1000;height:calc(300% + 60px)}.grid-container-lines .grid-item:nth-child(2):before,.grid-container-lines .grid-item:nth-child(8):before{content:'';margin:-11px;top:0;bottom:0;width:calc(300% + 100px);border-top:2px solid red;border-bottom:2px solid red;display:block;z-index:1000}.grid-container-lines .grid-item:nth-child(1):before,.grid-container-lines .grid-item:nth-child(4):before,.grid-container-lines .grid-item:nth-child(7):before{color:red;margin:-1px;top:-20px;left:-75px;padding:0 10px;z-index:1000}.grid-container-lines .grid-item:nth-child(1):before{content:'Line 1'}.grid-container-lines .grid-item:nth-child(4):before{content:'Line 2'}.grid-container-lines .grid-item:nth-child(7):before{content:'Line 3'}.grid-container-lines .grid-item:nth-child(7):after{content:'Line 4';color:red;margin:-1px;bottom:-20px;left:-75px;padding:0 10px;z-index:1000}.grid-container-lines .grid-item:nth-child(1):after,.grid-container-lines .grid-item:nth-child(2):after,.grid-container-lines .grid-item:nth-child(3):before{white-space:pre;top:-60px;padding:10px;color:red;display:block;left:0;transform:translateX(calc(-50% - 10px))}.grid-container-lines .grid-item:nth-child(1):after{content:'Line 1'}.grid-container-lines .grid-item:nth-child(2):after{content:'Line 2'}.grid-container-lines .grid-item:nth-child(3):before{content:'Line 3'}.grid-container-lines .grid-item:nth-child(3):after{content:'Line 4';top:-60px;padding:10px;color:red;display:block;right:0;transform:translateX(calc(50% + 10px));white-space:pre}.grid-container-responsive{margin:-10px!important;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:5px;background-color:#333}@media screen and (max-width:968px){.grid-container-responsive{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:680px){.grid-container-responsive{grid-template-columns:1fr}}.grid-container-no-align,.grid-container-align{margin:-10px!important;display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(2,auto);height:150px}.grid-container-align{justify-items:center;align-items:center;justify-content:center;align-content:center}.grid-container-no-align .grid-item,.grid-container-align .grid-item{width:50px;height:50px}.grid-container-nesting{display:grid;grid-template-rows:repeat(3,fit-content);grid-template-columns:auto auto;background:#333;grid-gap:5px;margin:-10px!important}.grid-container-nesting-1{display:grid;grid-template-columns:auto auto auto;grid-gap:5px}.grid-container-overflow{display:grid;grid-template-rows:repeat(3,100px);grid-template-columns:auto auto;height:200px;overflow-y:scroll;background:#333;grid-gap:5px;margin:-10px!important}