/* General styles for the body and container */ body, html { height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0; /* Optional: background color */ } .grid-container { display: grid; height: 100vh; width: 100vw; grid-template-columns: repeat(auto-fit,1fr); /* grid-template-rows: repeat(3,1fr);*/ grid-row: 1/3; "heading . signature" ". logo ." "nav nav nav" } .grid-item { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; } .grid-item img { max-width: 25vw; /* Image width occupies 25% of the viewport width */ max-height: 25vh; /* Image height occupies 25% of the viewport height */ object-fit: contain; }