Layout de CSS

This translation is incomplete. Please help translate this article from English

Neste ponto, nós já examinamos o básico de CSS, como estilizar o texto, e como estilizar e manipular as caixas em que o seu conteúdo se enquadra. Agora é hora de ver como colocar as suas caixas no lugar certo em relação à viewport, e um ao outro. Nós cobrimos os pré-requisitos necessários para que possamos mergulhar profundamente no layout CSS, olhando para diferentes configurações de exibição, métodos de layout tradicionais envolvendo flutuador e posicionamento, e ferramentas de layout modernas como flexbox.


Antes de iniciar este módulo, já deverá ter:

  1. Ter familiaridade básica com HTML, conforme discutido no módulo de Introdução ao HTML.
  2. Estar confortável com os básico de CSS, como discutido em Introdução ao CSS.
  3. Compreender em como estilizar caixas.

Nota: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.


These articles will provide instruction on the fundamental layout tools and techniques available in CSS.

Introduction to CSS layout
This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
Normal Flow
Elements on webpages lay themselves out according to normal flow - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many feature that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout.
Originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different position values, and how to use them.
Multiple-column layout
The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.
Legacy layout methods
Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.

Consulte também

Practical positioning examples
This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.
Supporting older browsers

In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.