---
title: Design Responsivo
slug: Learn/CSS/CSS_layout/Responsive_Design
translation_of: Learn/CSS/CSS_layout/Responsive_Design
---
<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div>

<p>Nos primórdios do web design, páginas eram criadas para serem visualizadas em um tamanho de tela específico.  Se o usuário tivesse uma tela maior ou menor do que o esperado, os resultados iam de barras de rolagem indesejadas, tamanhos de linha excessivamente longos e uso inadequado do espaço. À medida que diferentes tamanhos de tela foram aparecendo, surgiu o conceito de web design responsivo (RWD), um conjunto de práticas que permite que páginas da Web alterem seu layout e aparência para se adequarem a diferentes larguras, resoluções, etc. É uma ideia que mudou a forma de como projetamos para a Web com múltiplos dispositivos e, neste artigo, ajudaremos você a entender as principais técnicas que você precisa conhecer para dominá-la.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>HTML básico (estude <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), e uma idea de como o CSS funciona (estude <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> e <a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Entender os conceitos fundamentais e a história do design responsivo.</td>
  </tr>
 </tbody>
</table>

<h2 id="História_dos_layouts_de_sites">História dos layouts de sites</h2>

<p>Em algum ponto da história, você tinha duas opções ao criar um site:</p>

<ul>
 <li>Você pode criar um site <em>líquido</em>, que se estenderia para preencher a janela do navegador</li>
 <li>ou um site de <em>largura fixa</em>, que seria um tamanho fixo em pixels.</li>
</ul>

<p>Essas duas abordagens, geralmente, resultavam em um site com a melhor aparência na tela da pessoa que o projetava! O site líquido resultou em um design esmagado para telas menores (como visto abaixo) e comprimentos de linha muito longos em telas maiores.</p>

<figure><img alt="A layout with two columns squashed into a mobile size viewport." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;">
<figcaption></figcaption>
</figure>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Veja este layout líquido simples: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">código-fonte</a>. Ao visualizar o exemplo, arraste a janela do navegador para dentro e para fora para ver como isso fica em tamanhos diferentes.</p>
</div>

<p>O site de largura fixa criava uma barra de rolagem horizontal em telas menores que a largura do site (como mostrado abaixo) e muito espaço em branco nas bordas do design em telas maiores.</p>

<figure><img alt="A layout with a horizontal scrollbar in a mobile viewport." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;">
<figcaption></figcaption>
</figure>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Veja este layout simples de largura fixa: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">código-fonte</a>. Observe novamente o resultado ao alterar o tamanho da janela do navegador.</p>
</div>

<div class="blockIndicator note">
<p><strong>Nota</strong>: As capturas de tela acima foram tiradas usando o <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> no Firefox DevTools.</p>
</div>

<p>À medida que a Web para dispositivos móveis começava a se tornar realidade com os primeiros telefones com essas características, empresas que desejavam adotar os dispositivos móveis geralmente criavam uma versão mobile do seu site, com uma URL diferente (geralmente algo como m.exemplo.com ou exemplo.mobi) Isso significava que duas versões separadas do site tinham que ser desenvolvidas e mantidas atualizadas.</p>

<p>Além disso, esses sites para celular geralmente ofereciam uma experiência muito restrita. À medida que os dispositivos móveis se tornaram mais poderosos e capazes de exibir sites completos, os usuários de celular ficaram frustrados, pois, se viram presos na versão mobile do site e incapazes de acessar todas as informações que faziam parte da versão para desktop.</p>

<h2 id="Layouts_flexiveis_antes_do_design_responsivo">Layouts flexiveis antes do design responsivo</h2>

<p>Várias abordagens foram desenvolvidas para tentar resolver as desvantagens dos métodos de largura líquida ou largura fixa da construção de sites. Em 2004, Cameron Adams escreveu um artigo intitulado <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>, descrevendo um método para criar um design que pudesse se adaptar a diferentes resoluções de tela. Essa abordagem necessitava do JavaScript para detectar a resolução da tela e carregar o CSS correto.</p>

<p>Zoe Mickley Gillenwater foi fundamental no <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">seu trabalho</a> de descrever e formalizar as diferentes maneiras pelas quais sites flexíveis poderiam ser criados, tentando encontrar um meio termo entre preencher a tela ou ter tamanho completamente fixo.</p>

<h2 id="Design_Responsivo">Design Responsivo</h2>

<p>O termo design responsivo foi <a href="https://alistapart.com/article/responsive-web-design/">cunhado por Ethan Marcotte em 2010</a>, e descreveu o uso de três técnicas combinadas.</p>

<ol>
 <li>A primeira foi a ideia de grids fluidas, que já estava sendo explorada por Gillenwater, e pode ser encontrada no artigo de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (publicado em 2009 em A List Apart).</li>
 <li>A segunda técnica foi a ideia de <a href="http://unstoppablerobotninja.com/entry/fluid-images">imagens fluidas</a>. Usando uma técnica muito simples que setava a propriedade <code>max-width</code> com <code>100%</code>, as imagens seriam reduzidas se a coluna que as continha se tornasse mais estreita que o tamanho intrínseco da imagem, mas nunca aumentariam. Isso permitiu que uma imagem fosse reduzida em tamanho para caber em uma coluna de tamanho flexível, em vez de transbordar, mas não aumentava e nem tornava-se pixelizada se a coluna fosse mais larga que a imagem.</li>
 <li>O terceiro componente-chave foi a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a>. Media Queries habilitavam o tipo de opção de layout usando o JavaScript, que Cameron Adams havia explorado anteriormente, usando apenas CSS. Em vez de ter um layout para todos os tamanhos de tela, o layout podia ser alterado. As barras laterais podiam ser reposicionadas para a tela menor ou uma navegação alternativa podia ser exibida.</li>
</ol>

<p>É importante entender que <strong>o design responsivo não é uma tecnologia separada</strong> — é um termo usado para descrever uma abordagem ao web design, ou um conjunto de melhores práticas, usado para criar um layout que possa <em>responder</em> ao dispositivo que está sendo usado para visualizar o conteúdo. Na exploração original de Marcotte, isso significava grades flexíveis (usando floats) e media queries, no entanto, nos últimos 10 anos, desde que o artigo foi escrito, trabalhar de forma responsiva se tornou um padrão. Os métodos de layout CSS modernos são inerentemente responsivos, e temos coisas novas incorporadas à plataforma web para facilitar o design de sites responsivos.</p>

<p>O restante deste artigo indicará os vários recursos da plataforma web que você pode usar ao criar um site responsivo.</p>

<h2 id="Media_Queries">Media Queries</h2>

<p>O Design Responsivo apenas foi capaz de emergir devido o recurse de media query. A especificação Media Queries Level 3 se tornou uma Recomendação de Candidato em 2009, significando que estava pronto para ser implementado nos browsers. Media Queries nos permitem executar uma série de testes (e.g. se a tela do usuário é maior que uma certa largura, ou uma certa resolução)  e aplicar um CSS seletivamente para estilizar a página de acordo com as necessidades do usuário.</p>

<p>Por exemplo, a seguinte media querie testa se a página atual está sendo exibida como mídia de tela (portanto, não é um documento impresso) e o viewport tem pelo menos 800 pixels de largura. O CSS para o seletor <code>.container</code> será aplicado apenas se essas duas condições forem verdade.</p>

<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
} </code>
</pre>

<p>Você pode adicionar múltiplos media queries dentro de uma folha de de estilo, ajustando inteiramente seu layout ou partes dele que melhor se adequem a vários tamanhos de tela. Os pontos em quem uma Media Query é introduzida e o layout alterado são conhecidos como <em>breakpoints</em>.</p>

<p>Uma abordagem comum ao utilizar Media Queries é criar um layout de única coluna para dispositivos de telas pequenas (e.g smartphones), então fazer a checagem para telas maiores e implementar um layout de múltiplas colunas quando houver largura suficiente. Esse design é frequentemente descrito como <strong>mobile first</strong>.</p>

<p>Encontre mais detalhes na documentação MDN para <a href="/en-US/docs/Web/CSS/Media_Queries">Media Queries</a>.</p>

<h2 id="Grids_Flexíveis">Grids Flexíveis</h2>

<p>Sites responsivos não apenas mudam seu layout entre <em>breakpoints</em>, eles são construídos em grids flexíveis. Um grid flexível significa que não há necessidade de marcar todos os tamanhos possíveis existentes, e sim, construir um layout perfeito baseado em pixels que se adequa automaticamente à tela. Essa abordagem seria impossível dado o vasto número de dispositivos com tamanhos diferentes que existem e o fato de que, mesmo nos desktops, as pessoas nem sempre utilizam a janela do navegador maximizada.</p>

<p>Com o uso de um grid flexível, não há necessidade de adicionar um <em>breakpoint</em> e alterar o desing no ponto onde o conteúdo começa a parecer ruim em determinada tela. Por exemplo, se o comprimento da linha se torna ilegível à medida que o tamanho da tela aumenta, ou uma caixa se fica espremida com duas palavras em cada linha, conforme o tamanho diminui.</p>

<p>Nos primórdios do design responsivo a única opção disponível para realizar layouts era utilizando <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Layouts flexíveis flutuantes eram alcançados dando a cada elemento uma largura percentual, garantindo que em todo layout os totais não fossem maior que 100%. In his original piece on fluid grids, Marcotte detailed a formula for taking a layout designed using pixels and converting it into percentages.</p>

<pre class="notranslate"><code>target / context = result </code>
</pre>

<p>For example if our target column size is 60 pixels, and the context (or container) it is in is 960 pixels, we divide 60 by 960 to get a value we can use in our CSS, after moving the decimal point two places to the right.</p>

<pre class="brush: css notranslate"><code>.col {
  width: 6.25%; /* 60 / 960 = 0.0625 */
} </code>
</pre>

<p>This approach will be found in many places across the web today, and it is documented here in the layout section of our <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a> article. It is likely that you will come across websites using this approach in your work, so it is worth understanding it, even though you would not build a modern site using a float-based flexible grid.</p>

<p>The following example demonstrates a simple responsive design using Media Queries and a flexible grid. On narrow screens the layout displays the boxes stacked on top of one another:</p>

<figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
<p>On wider screens they move to two columns:</p>

<figcaption></figcaption>
</figure>

<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
<figcaption></figcaption>
</figure>

<div class="blockIndicator note">
<p><strong>Note</strong>: You can find the <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">live example</a> and <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">source code</a> for this example on GitHub.</p>
</div>

<h2 id="Modern_layout_technologies">Modern layout technologies</h2>

<p>Modern layout methods such as <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, and <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> are responsive by default. They all assume that you are trying to create a flexible grid and give you easier ways to do so.</p>

<h3 id="Multicol">Multicol</h3>

<p>The oldest of these layout methods is multicol — when you specify a <code>column-count</code>, this indicates how many columns you want your content to be split into. The browser then works out the size of these, a size that will change according to the screen size.</p>

<pre class="brush: css notranslate"><code>.container {
  column-count: 3;
} </code>
</pre>

<p>If you instead specify a <code>column-width</code>, you are specifying a <em>minimum</em> width. The browser will create as many columns of that width as will comfortably fit into the container, then share out the remaining space between all the columns. Therefore the number of columns will change according to how much space there is.</p>

<pre class="brush: css notranslate"><code>.container {
  column-width: 10em;
} </code>
</pre>

<h3 id="Flexbox">Flexbox</h3>

<p>In Flexbox, flex items will shrink and distribute space between the items according to the space in their container, as their initial behavior. By changing the values for <code>flex-grow</code> and <code>flex-shrink</code> you can indicate how you want the items to behave when they encounter more or less space around them.</p>

<p>In the example below the flex items will each take an equal amount of space in the flex container, using the shorthand of <code>flex: 1</code> as described in the layout topic <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">Flexbox: Flexible sizing of flex items</a>.</p>

<pre class="brush: css notranslate"><code>.container {
  display: flex;
}

.item {
  flex: 1;
} </code>
</pre>

<div class="blockIndicator note">
<p><strong>Note</strong>: As an example we have rebuilt the simple responsive layout above, this time using flexbox. You can see how we no longer need to use strange percentage values to calculate the size of the columns: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">example</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">source code</a>.</p>
</div>

<h3 id="CSS_grid">CSS grid</h3>

<p>In CSS Grid Layout the <code>fr</code> unit allows the distribution of available space across grid tracks. The next example creates a grid container with three tracks sized at <code>1fr</code>. This will create three column tracks, each taking one part of the available space in the container. You can find out more about this approach to create a grid in the Learn Layout Grids topic, under <a href="en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Flexible grids with the fr unit</a>.</p>

<pre class="brush: css notranslate"><code>.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} </code>
</pre>

<div class="blockIndicator note">
<p><strong>Note</strong>: The grid layout version is even simpler as we can define the columns on the .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">example</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">source code</a>.</p>
</div>

<h2 id="Responsive_images">Responsive images</h2>

<p>The simplest approach to responsive images was as described in Marcotte's early articles on responsive design. Basically, you would take an image that was at the largest size that might be needed, and scale it down. This is still an approach used today, and in most stylesheets you will find the following CSS somewhere:</p>

<pre class="brush: css notranslate"><code>img {
  max-width: 100%:
} </code>
</pre>

<p>There are obvious downsides to this approach. The image might be displayed a lot smaller than its intrinsic size, which is a waste of bandwidth — a mobile user may be downloading an image several times the size of what they actually see in the browser window. In addition, you may not want the same image aspect ratio on mobile as on desktop. For example, it might be nice to have a square image for mobile, but show the same scene as a landscape image on desktop. Or, acknowledging the smaller size of an image on mobile you might want to show a different image altogether, one which is more easily understood at a small screen size. These things can't be achieved by simply scaling down an image.</p>

<p>Responsive Images, using the <code><a href="/en-US/docs/Web/HTML/Element/picture">&lt;picture&gt;</a></code> element and the <code><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;</a></code> <code>srcset</code> and <code>sizes</code> attributes solve both of these problems. You can provide multiple sizes along with "hints" (meta data that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using.</p>

<p>You can also <em>art direct</em> images used at different sizes, thus providing a different crop or completely different image to different screen sizes.</p>

<p>You can find a detailed <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide to Responsive Images in the Learn HTML section</a> here on MDN.</p>

<h2 id="Responsive_typography">Responsive typography</h2>

<p>An element of responsive design not covered in earlier work was the idea of responsive typography. Essentially, this describes changing font sizes within media queries to reflect lesser or greater amounts of screen real estate.</p>

<p>In this example, we want to set our level 1 heading to be <code>4rem</code>, meaning it will be four times our base font size. That's a really large heading! We only want this jumbo heading on larger screen sizes, therefore we first create a smaller heading then use media queries to overwrite it with the larger size if we know that the user has a screen size of at least 1200px.</p>

<pre class="brush: css notranslate"><code>html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
} </code>
</pre>

<p>We have edited our responsive grid example above to also include responsive type using the method outlined. You can see how the heading switches sizes as the layout goes to the two column version.</p>

<p>On mobile the heading is smaller:</p>

<figure><img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
<p>On desktop however we see the larger heading size:</p>

<figcaption></figcaption>
</figure>

<figure><img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;">
<figcaption></figcaption>
</figure>

<div class="blockIndicator note">
<p><strong>Note</strong>: See this example in action: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">example</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">source code</a>.</p>
</div>

<p>As this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. They can be used to tweak any element to make it more usable or attractive at alternate screen sizes.</p>

<h3 id="Using_viewport_units_for_responsive_typography">Using viewport units for responsive typography</h3>

<p>An interesting approach is to use the viewport unit <code>vw</code> to enable responsive typography. <code>1vw</code> is equal to one percent of the viewport width, meaning that if you set your font size using <code>vw</code>, it will always relate to the size of the viewport.</p>

<pre class="brush: css notranslate">h1 {
  font-size: 6vw;
}</pre>

<p>The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. <strong>Therefore you should never set text using viewport units alone</strong>.</p>

<p>There is a solution, and it involves using <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. If you add the <code>vw</code> unit to a value set using a fixed size such as <code>em</code>s or <code>rem</code>s then the text will still be zoomable. Essentially, the <code>vw</code> unit adds on top of that zoomed value:</p>

<pre class="brush: css notranslate">h1 {
  font-size: calc(1.5rem + 3vw);
}</pre>

<p>This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.</p>

<div class="blockIndicator note">
<p>See an example of this in action: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">example</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">source code</a>.</p>
</div>

<h2 id="The_viewport_meta_tag">The viewport meta tag</h2>

<p>If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <code>&lt;head&gt;</code> of the document.</p>

<pre class="brush: html notranslate"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
</pre>

<p>This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.</p>

<p>Why is this needed? Because mobile browsers tend to lie about their viewport width.</p>

<p>This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would therefore set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.</p>

<p>The trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile. By setting <code>width=device-width</code> you are overriding Apple's default <code>width=960px</code> with the actual width of the device, so your media queries will work as intended.</p>

<p><strong>So you should <em>always</em> include the above line of HTML in the head of your documents.</strong></p>

<p>There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.</p>

<ul>
 <li><code>initial-scale</code>: Sets the initial zoom of the page, which we set to 1.</li>
 <li><code>height</code>: Sets a specific height for the viewport.</li>
 <li><code>minimum-scale</code>: Sets the minimum zoom level.</li>
 <li><code>maximum-scale</code>: Sets the maximum zoom level.</li>
 <li><code>user-scalable</code>: Prevents zooming if set to <code>no</code>.</li>
</ul>

<p>You should avoid using <code>minimum-scale</code>, <code>maximum-scale</code>, and in particular setting <code>user-scalable</code> to <code>no</code>. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.</p>

<div class="blockIndicator note">
<p><strong>Note</strong>: There is a CSS @ rule designed to replace the viewport meta tag — <a href="/en-US/docs/Web/CSS/@viewport">@viewport</a> — however it has poor browser support. It was implemented in Internet Explorer and Edge, however once the Chromium-based Edge ships it will no longer be part of the Edge browser.</p>
</div>

<h2 id="Summary">Summary</h2>

<p>Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques, and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.</p>

<p>It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.</p>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p>

<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
</ul>