반응형 레이아웃 질문입니다.

안녕하세요. HTML CSS 강의를 듣고 구글 메인 페이지의 클론 코딩을 하고 있습니다.

구글 메인 페이지처럼 반응형 레이아웃을 구현하는 법을 알고 싶어 질문합니다.

아래 사진과 같이 처음 구글의 메인 페이지의 높이를 줄이면 검색 창 하단의 여백만 줄어듭니다.
 

이후 페이지의 높이를 더 줄이면 하단의 여백은 유지되고 검색 창 상단의 여백이 줄어듭니다.


이렇게 상황에 따라 특정 부분만 늘어나고 줄어들게 만드는 방법을 알고 싶습니다.

감사합니다.