A definição de design responsivo da Web é a abordagem que sugere que o design e o desenvolvimento devem responder ao comportamento do usuário e ao ambiente com base no tamanho da tela, plataforma e orientação.
A prática consiste em uma mistura de grades e layouts flexíveis, imagens e um uso inteligente de consultas de mídia CSS. Conforme o usuário muda do laptop para o iPad, o site deve mudar automaticamente para acomodar a resolução, o tamanho da imagem e as capacidades de script.
Sites responsivos com CSS Grid Layout
Esta técnica consiste em dividir uma página em regiões e definir um tamanho máximo para cada padrão e tamanho de tela. Bibliotecas como Bootstrap usam desta técnica, que é muito popular e fácil de implementar.
O caracteriza esta técnica é o uso de linhas e colunas.
No Bootstrap por exemplo, o sistema de grid consiste em uma linha de 12 colunas na qual você pode definir qual o espaço que seu conteúdo (textos e imagens) irão ocupar dentro destas colunas, a facilidade de implementar e organizar os conteúdos dentro deste sistema foi um dos fatores por tornar o BootStrap tão popular.
No entanto, você mesmo pode criar o seu sistema de grid sem depender de nenhuma biblioteca, no site da MDN você pode encontrar um exemplo, acesse – https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout
Sites responsivos com FlexBox
O Flexbox é um conceito ainda mais moderno que o CSS Grid e resolvem algumas limitações das técnicas de CSS Grid.
Ao invés de trabalhar apenas com linhas e colunas, o FlexBox trabalha com um eixo, e é a partir deste eixo que o conteúdo é organizado.
Também no site da MDN, você encontra um vasto material a respeito – https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox
