HTML & CSS · Capítulo 3

Flexbox, Grid e responsividade

Layouts modernos que se adaptam ao ecrã.

CONCEITO

O que precisas de perceber

Flexbox é excelente numa dimensão; Grid controla linhas e colunas. Prefere unidades fluidas, minmax(), clamp() e media queries apenas quando o conteúdo exige.

EXEMPLO

Vê o código

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
h1{font-size:clamp(2rem,6vw,5rem)}

CADERNO DIGITAL

As minhas notas

Escreve apontamentos deste capítulo. Ficam apenas neste dispositivo.

Guardado localmente.

AGORA TU

Exercício

Faz uma grelha que passe de 4 colunas para 1 sem breakpoints fixos.

← CSS, cascata e box model Formulários e acessibilidade →