CSS e desenho de interfaces · Lição 08 / 12

Grid: relações em duas dimensões

Os três cartões agora precisam de colunas consistentes, com espaço para o texto crescer.

Vamos descobrir juntos

1
Display:grid organiza filhos diretos em linhas e colunas. Grid-template-columns:1fr 1fr cria duas colunas com frações do espaço disponível; gap reserva espaço entre elas antes dessa distribuição.
2
Repeat(3,minmax(0,1fr)) cria três faixas flexíveis cujo mínimo explícito é zero. Isso ajuda a permitir encolhimento; texto e filhos também precisam conseguir quebrar. Não é uma garantia de que qualquer conteúdo caberá.
3
A oficina mostra as larguras calculadas das colunas. Compare duas e três colunas. Com contêiner de 600px e gap de 20px entre três colunas iguais, sobram 560px para as três, cerca de 186,67px cada.
4
Não reorganize a ordem significativa apenas com posicionamento visual. Uma coluna pode ser melhor em telas estreitas; na próxima lição vamos condicionar a grade ao espaço disponível.

Oficina: uma interface, diferentes espaços

Edite o bloco <style id="lesson-css"> em “Meus arquivos e GitHub”. A prévia aplica esse CSS à estrutura HTML fornecida; confira alterações de HTML no arquivo baixado. Recursos externos e CSS fora do conjunto de estudo não são aceitos aqui.

Ir ao meu códigoLargura do documento de prévia

As medidas descrevem esta prévia, não garantem todos os tamanhos ou a acessibilidade completa. Teste conteúdo longo, zoom, teclado e tecnologias assistivas no projeto local.

Laboratório de contraste entre duas cores

Cor do textoCor do fundo

Razão aproximada ·

Cálculo apenas para duas cores sRGB opacas escolhidas aqui; não lê sua página. O limiar usa a razão sem arredondar. Não avalia transparência, gradientes, imagens, estados ou conformidade completa.

O código mudou. Aplique novamente para observar esta versão.CSS aplicado. Compare as medidas e teste o teclado dentro da prévia.Não foi possível aplicar. Mantenha um único style com id lesson-css, até 65.536 caracteres no documento e use o CSS ensinado, sem URLs, imports, escapes ou regras externas. Propriedades inválidas podem ser ignoradas pelo navegador; isto não é um validador completo.Página de estudo com seu CSSSimNãoMovimento reduzidoSem preferência por reduçãoO par atinge 4,5:1 para texto comum.O par fica abaixo de 4,5:1 para texto comum.<a href="#conteudo">Pular para o conteúdo</a> <header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p> <nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header> <main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards"> <article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article> <article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article> <article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section> <section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section> <section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main> <footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>

Links oficiais e próximo passo

Referência para investigar

✦

SUA MISSÃO

Construir uma grade simples e evitar limites mínimos que provocam transbordamento.

Leve com você

Compare duas e três colunas. Anote a largura, o gap e o que aconteceu com o texto; escolha por legibilidade, não só simetria.

No seu ritmo

Meus arquivos e GitHub

Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

Manual do aluno

O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

Conferindo seu acesso à lição…

Seu caminho, passo a passo

Baixar material da atividade

Baixe o exemplo da lição e um caderno para suas anotações. O ZIP inclui um guia para organizar atividades em um ou mais repositórios. Publicar é opcional; contas elegíveis também podem usar o botão de envio ao GitHub.

Seu arquivo desta lição

Edite o exemplo ou registre o que aprendeu. Este espaço não executa código nem corrige respostas. O rascunho é salvo apenas neste navegador, separado por conta; baixar e enviar ao GitHub são ações suas.

O exemplo pode ser apenas um trecho ou roteiro. Mudar a extensão não o transforma em programa completo. O ZIP da atividade contém material inicial; o botão de arquivo editado baixa o seu texto.

Meu código ou minhas anotações

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'">
<title>Oficina de ideias: uma interface que se adapta</title>
<style id="lesson-css">
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; padding: 1rem; font-family: system-ui, sans-serif; line-height: 1.6; color: #15364c; background-color: #eef4f7; }
main, header, footer { max-width: 64rem; margin: 0 auto 1.25rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2rem; }
a { color: #07598a; text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid #a13c00; outline-offset: 4px; }
.hero, .card, .lab { background-color: #ffffff; border: 1px solid #a4bac8; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.card { min-width: 0; margin-bottom: 0; }
.nav a { display: inline-block; padding: .5rem; }
.sample { color: #15364c; background-color: #ffffff; }
.measure { width: 200px; padding: 20px; border: 2px solid #15364c; box-sizing: border-box; background-color: #e1f4ed; }
button { font: inherit; padding: .75rem 1rem; border: 2px solid #15364c; border-radius: .5rem; background-color: #15364c; color: #ffffff; cursor: pointer; }
p, li, a { overflow-wrap: anywhere; }
.cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
</style></head><body>
<a href="#conteudo">Pular para o conteúdo</a>
<header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p>
<nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header>
<main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards">
<article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article>
<article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article>
<article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section>
<section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section>
<section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main>
<footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>
</body></html>

Formato do arquivo

Seu texto será guardado neste navegador ao editar. Em computador compartilhado, limpe os rascunhos ao terminar.

O envio direto aceita até 8 KiB de texto em um arquivo. Use o download e o guia manual para projetos com vários arquivos.

Grid: relações em duas dimensões

Vamos descobrir juntos

Oficina: uma interface, diferentes espaços

Medidas observadas na prévia

Laboratório de contraste entre duas cores

Links oficiais e próximo passo

Agora é a sua vez

Preveja, altere, compare

Leve com você

Meus arquivos e GitHub

Seu arquivo desta lição

Guardar no meu GitHub

Rullstpetbot