0Pricing
CSS Academy · Aula

Larguras Fluídas com Porcentagens

Use larguras baseadas em porcentagens para criar layouts que se ajustem ao tamanho do contêiner.

Larguras Fluídas com Porcentagens é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Por que usar larguras fluidas?

Disposições com largura fixa (em pixels) quebram em telas mais estreitas que o tamanho fixo. Larguras fluidas que utilizam porcentagens fazem as disposições serem dimensionadas proporcionalmente a qualquer tamanho de contêiner ou janela de visualização.

Noções básicas sobre largura percentual

Uma largura percentual é relativa à largura do contêiner pai. Um elemento filho com width: 50% sempre terá metade da largura do elemento pai.

<div style="width:300px;border:1px dashed #999;padding:4px;">
  <div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
  <div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>

Porcentagem e dimensionamento da caixa

Com box-sizing: border-box, as larguras percentuais incluem o preenchimento e a borda. Isso facilita a criação de colunas percentuais — 50% é realmente metade, independentemente do preenchimento.

<div style="width:300px;border:1px dashed #999;">
  <div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>

Disposição fluida com duas colunas

Uma disposição fluida simples baseada em float (legada):

<div style="width:100%;overflow:auto;">
  <div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
  <div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>

Colunas fluidas com Flexbox

Usar o Flexbox para criar disposições fluidas em colunas é mais simples:

<div class="flex-row">
  <div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
  <div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>

Preenchimento percentual

O preenchimento percentual é sempre relativo à largura do elemento pai (não à altura) — inclusive no preenchimento superior e inferior. Isso permite criar truques de proporção:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

Proporção moderna

A propriedade aspect-ratio substitui o truque com preenchimento para manter proporções:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

max-width com disposição fluida

Combinar larguras percentuais com max-width impede que as linhas fiquem largas demais em telas grandes:

<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>

Problema da altura percentual

A altura percentual exige que o elemento pai tenha uma altura definida. Se o elemento pai tiver height: auto, as alturas percentuais dos elementos filhos também serão calculadas como auto.

Palavras-chave de dimensionamento intrínseco

O CSS moderno adiciona mais opções de dimensionamento fluido:

  • min-content: o menor tamanho que acomoda o conteúdo
  • max-content: o tamanho que acomoda todo o conteúdo em uma única linha
  • fit-content: um tamanho entre min-content e max-content
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>

Padrão de grade fluida

Uma grade fluida comum usando inline-block (legado) ou CSS moderno:

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
  <div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>

Verificação rápida

Um elemento pai tem 600px de largura. Um elemento filho tem width: 60% e padding: 20px (box-sizing: border-box). Qual é a largura do conteúdo do elemento filho?

Recapitulação

Larguras percentuais criam layouts fluidos que se ajustam ao contêiner pai. Combine-as com max-width para evitar conteúdo excessivamente largo. Use aspect-ratio para mídias responsivas. Flexbox e Grid gerenciam colunas fluidas com mais elegância do que floats percentuais.

Perguntas Frequentes

A aula “Larguras Fluídas com Porcentagens” é grátis?

Sim — o texto completo de “Larguras Fluídas com Porcentagens” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Larguras Fluídas com Porcentagens”?

Use larguras baseadas em porcentagens para criar layouts que se ajustem ao tamanho do contêiner. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Larguras Fluídas com Porcentagens”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Abordagem Mobile-First vs Desktop-First
  2. Larguras Fluídas com Porcentagens
  3. Padrões de Min-Width e Max-Width
  4. Imagens Responsivas e o Elemento Picture
← Voltar para CSS Academy