.maximize { width: 100%; height: 100%; } .grid { display: grid; row-gap: 10px; column-gap: 1%; /* grid-template-columns: repeat( auto-fit, minmax(7.25%, 1fr) ); */ grid-template-columns: repeat(12, 1fr); } .subgrid { display: grid; grid-template-columns: subgrid; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; } #video { width: 100%; } /* The search field */ #myInput { box-sizing: border-box; background-image: url('/assets/searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 1em; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } /* The search field when it gets focus/clicked on */ #myInput:focus { outline: 3px solid #ddd; } #amount { font-size: 1em; width: 3em; height: calc(100% - 4px);; } /* The container