From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/pt-pt/web/css/css_grid_layout/index.html | 251 ------------------------- 1 file changed, 251 deletions(-) delete mode 100644 files/pt-pt/web/css/css_grid_layout/index.html (limited to 'files/pt-pt/web/css/css_grid_layout/index.html') diff --git a/files/pt-pt/web/css/css_grid_layout/index.html b/files/pt-pt/web/css/css_grid_layout/index.html deleted file mode 100644 index cdb4293de2..0000000000 --- a/files/pt-pt/web/css/css_grid_layout/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: CSS - Layout de Grade -slug: Web/CSS/CSS_Grid_Layout -tags: - - CSS - - Grades - - Layout - - Layout de Grade - - Referencia - - Resumo -translation_of: Web/CSS/CSS_Grid_Layout -original_slug: Web/CSS/layout_de_grelha_css ---- -

CSS - Layout de Grade destaca-se em dividir uma página em regiões principais, ou definir a relação em termos de tamanho, posição e camada, entre partes de um controle criado a partir de HTML primitivas. 
-  
- Tal como as tabelas, o layout de grelha permite que um autor alinhe os elementos em colunas e linhas. No entanto, são possíveis muitos mais layouts ou mais fáceis com a grelha de CSS do que eram com as tabelas. Por exemplo, os elementos filhos de um recipiente de grelha poderão posicionar-se a eles mesmos, e assim eles realmente se sobrepõem e a camada, similar aos elementos posicionados do CSSs..

- -

Exemplo básico

- -

O exemplo abaixo mostra uma grelha de faixa com três colunas, com novas linhas criadas com um mínimo de 100 píxeis e um máximo de auto. Os itens foram colocados na grelha utilizando o posicionamento baseado em linha .

- -
- - -

HTML

- -
<div class="wrapper">
-  <div class="one">One</div>
-  <div class="two">Two</div>
-  <div class="three">Three</div>
-  <div class="four">Four</div>
-  <div class="five">Five</div>
-  <div class="six">Six</div>
-</div>
- -

CSS

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-}
-.one {
-  grid-column: 1 / 3;
-  grid-row: 1;
-}
-.two {
-  grid-column: 2 / 4;
-  grid-row: 1 / 3;
-}
-.three {
-  grid-column: 1;
-  grid-row: 2 / 5;
-}
-.four {
-  grid-column: 3;
-  grid-row: 3;
-}
-.five {
-  grid-column: 2;
-  grid-row: 4;
-}
-.six {
-  grid-column: 3;
-  grid-row: 4;
-}
-
- -

{{ EmbedLiveSample('example', '500', '440') }}

-
- -

Referência

- -

CSS - propriedades

- -
- -
- -

CSS - funções

- -
- -
- -

CSS - tipos de dados

- -
- -
- -

Glossário - entradas

- -
- -
- -

Guias

- -
- -
- -

Recursos externos

- - - -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
- - -- cgit v1.2.3-54-g00ecf