* { box-sizing: border-box; } body { margin: 0; height: 100vh; padding: 5em; padding-left: auto; padding-right: auto; background-color: pink; display: flex; align-items: center; justify-content: center; background: url("bg.svg") center center/auto repeat, linear-gradient( to bottom, transparent, pink ); } .search-grid { margin-top: -10em; width: 40em; height: 30em; display: grid; gap: 5em; grid-template-rows: 10em 4em; } .search { grid-row: 2; grid-column: 1 / span 2; } .search-logo { grid-row: 1; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; color: black; } .search-logo img { height: 100%; } .grid-item { background-color: lightblue; padding: 1em; border-radius: .5em; }