Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Tutorial de layout de grade CSS Grid

I. Visão geral

Layout de grade (Grid) é a solução de layout CSS mais poderosa.

Ele divide as páginas da web em grades e diferentes grades podem ser combinadas arbitrariamente para criar vários layouts. No passado, efeitos que só poderiam ser alcançados através de estruturas CSS complexas agora são incorporados aos navegadores.

Um layout como o mostrado acima é a especialidade do layout Grid.

O layout Grid tem certas semelhanças com o layout Flex, ambos podem especificar a posição de vários itens dentro do contêiner. No entanto, existem diferenças importantes.

O layout flexível é um layout de eixo e só pode especificar a posição do "item" em relação ao eixo, o que pode ser considerado comoLayout unidimensional . O layout da grade divide o contêiner em "linhas" e "colunas", gera células e depois especifica a célula onde o "item está localizado", o que pode ser considerado comoLayout 2D . O layout Grid é muito mais poderoso que o layout Flex.

2. Conceitos básicos

Antes de aprender o layout de grade, você precisa entender alguns conceitos básicos.

2.1 Containers e projetos

Uma área com layout de grade é chamada de "contêiner". Os elementos filhos que utilizam posicionamento de grade dentro do contêiner são chamados de "itens".

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

No código acima, o mais externo<div>O elemento é o contêiner, e os três internos<div>Elementos são itens.

Perceber: O projeto só pode ser o elemento filho de nível superior do contêiner e não inclui os elementos filhos do projeto, como o código acima<p> Elementos não são itens. O layout de grade só entra em vigor em projetos.

2.2 Linhas e colunas

A área horizontal dentro do contêiner é chamada de “linha” e a área vertical é chamada de “coluna”.

Na imagem acima, as áreas escuras horizontais são “linhas” e as áreas escuras verticais são “colunas”.

2.3 Células

A área de intersecção de linhas e colunas é chamada de "célula".

Sob circunstâncias normais,nOK emcolunas produzirãon x m células. Por exemplo, 3 linhas e 3 colunas produzirão 9 células.

2.4 Linhas de grade

As linhas que dividem a grade são chamadas de “linhas de grade”. As linhas de grade horizontais dividem as linhas e as linhas de grade verticais dividem as colunas.

Sob circunstâncias normais,nOKn + 1linha de grade horizontal raiz,mListadom + 1Existem três linhas de grade verticais, por exemplo, existem quatro linhas de grade horizontais em três linhas.

A imagem acima é uma grade 4 x 4 com um total de 5 linhas de grade horizontais e 5 linhas de grade verticais.

3. Propriedades do contêiner

As propriedades do layout de grade são divididas em duas categorias. Um tipo é definido no contêiner e é chamado de propriedades do contêiner; o outro tipo é definido no projeto e é chamado de propriedades do projeto. Esta parte apresenta primeiro as propriedades do contêiner.

3.1 atributo de exibição

display: gridEspecifica um contêiner para usar um layout de grade.

div {
  display: grid;
}
1
2
3

A imagem acima édisplay: griddeEfeito。

Por padrão, os elementos do contêiner são elementos em nível de bloco, mas também podem ser definidos como elementos embutidos.

div {
  display: inline-grid;
}
1
2
3

O código acima especificadivÉ um elemento embutido que usa um layout de grade internamente.

A imagem acima édisplay: inline-griddeEfeito。

Observe que após definir o layout de grade, os subelementos do contêiner (itens)float、display: inline-block、display: table-cell、vertical-alignecolumn-*Todas as outras configurações serão inválidas.

3.2 atributo grid-template-columns, atributo grid-template-rows

Após o contêiner especificar o layout da grade, ele deverá dividir as linhas e colunas.grid-template-columnsAs propriedades definem a largura de cada coluna,grid-template-rowsA propriedade define a altura de cada linha.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

código acimaEspecifica uma grade com três linhas e três colunas. A largura da coluna e a altura da linha são ambas.100px。

Em vez de usar unidades absolutas, você também pode usar porcentagens.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

（1）repetir()

Às vezes é muito problemático escrever o mesmo valor repetidamente, especialmente quando há muitas grades.Neste momento você pode usarrepeat() Função que simplifica valores repetidos.O código acima usarepeat()Reescrito da seguinte forma.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()Aceita dois parâmetros, o primeiro parâmetro é o número de repetições (3 no exemplo acima) e o segundo parâmetro é o valor a ser repetido.

repeat()Não há problema em repetir um padrão.

grid-template-columns: repeat(2, 100px 20px 80px);
1

código acima6 colunas são definidas, a largura da primeira e da quarta colunas é100px, a segunda e quinta colunas20px, a terceira coluna e a sexta coluna80px。

(2) palavra-chave de preenchimento automático

Às vezes, o tamanho da célula é fixo, mas o tamanho do contêiner é indefinido.Se quiser que cada linha (ou coluna) acomode o máximo de células possível, você pode usarauto-fillPalavras-chave representam preenchimento automático.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

código acimaRepresenta a largura de cada coluna100pxe, em seguida, é preenchido automaticamente até que o contêiner não possa conter mais colunas.

Além deauto-fille uma palavra-chaveauto-fit , o comportamento de ambos é basicamente o mesmo.Somente quando o contêiner for largo o suficiente para acomodar todas as células em uma linha e a largura da célula não for fixadiferenças comportamentais：auto-fillA largura restante será preenchida com células vazias.auto-fittentará expandir a largura da célula.

(3) palavra-chave fr

Para expressar convenientemente relações proporcionais, o layout de grade fornecefr Palavra-chave (abreviação de fração, que significa "fragmento").Se as larguras das duas colunas forem1fre2fr, o que significa que o último é o dobro do primeiro.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

código acimaRepresenta duas colunas da mesma largura.

frPode ser usado em conjunto com unidades de comprimento absoluto, o que é muito conveniente.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

código acimasignifica que a primeira coluna tem 150 pixels de largura e a segunda coluna tem metade da largura da terceira coluna.

(4)minmáx()

minmax() A função produz um intervalo de comprimento, indicando que o comprimento está dentro desse intervalo. Aceita dois parâmetros, o valor mínimo e o valor máximo.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

No código acima,minmax(100px, 1fr)Indica que a largura da coluna não é menor que100px, não maior que1fr。

(5) palavra-chave automática

autoO comprimento da representação da palavra-chave é determinado pelo próprio navegador.

grid-template-columns: 100px auto 100px;
1

No código acima, a largura da segunda coluna é basicamente igual à largura máxima da célula na coluna, a menos que o conteúdo da célula seja definidomin-width, e esse valor é maior que a largura máxima.

(6) Nome das linhas de grade

grid-template-columnsatributos egrid-template-rowsNas propriedades, você também pode usar colchetes para especificar o nome de cada linha de grade para fácil referência no futuro.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

O código acima especifica um layout de grade de 3 linhas x 3 colunas, portanto, há 4 linhas de grade verticais e 4 linhas de grade horizontais. Dentro dos colchetes estão os nomes das oito linhas.

O layout de grade permite vários nomes para a mesma linha, como[fifth-line row-5]。

(7) Exemplo de layout

grid-template-columns As propriedades são muito úteis para o layout de páginas da web. O layout de duas colunas requer apenas uma linha de código.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

O código acima define a coluna da esquerda para 70% e a coluna da direita para 30%.

O layout tradicional de doze grades também é fácil de escrever.

grid-template-columns: repeat(12, 1fr);
1

3.3 atributo grid-row-gap, atributo grid-column-gap, atributo grid-gap

grid-row-gapA propriedade define o espaçamento entre linhas (espaçamento entre linhas),grid-column-gapA propriedade define o espaçamento entre colunas (espaçamento entre colunas).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

código acimameio,grid-row-gapUsado para definir o espaçamento entre linhas,grid-column-gapUsado para definir o espaçamento das colunas.

grid-gapAs propriedades sãogrid-column-gapegrid-row-gapA forma de abreviatura combinada de , a sintaxe é a seguinte.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

Portanto, o trecho de código CSS acima é equivalente ao código a seguir.

.container {
  grid-gap: 20px 20px;
}
1
2
3

segrid-gapO segundo valor é omitido e o navegador considera o segundo valor igual ao primeiro valor.

De acordo com os padrões mais recentes, os três nomes de atributos acimagrid-O prefixo foi removido,grid-column-gapegrid-row-gapescrito comocolumn-gaperow-gap，grid-gapescrito comogap。

3.4 propriedade grid-template-areas

O layout de grade permite especificar "áreas", que são compostas por células únicas ou múltiplas.grid-template-areasPropriedades são usadas para definir áreas.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

O código acima primeiro divide 9 células e depois as nomeiaachegariAs nove áreas correspondem a essas nove células respectivamente.

O método de escrita para mesclar várias células em uma área é o seguinte.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

O código acima divide 9 células ema、b、ctrês áreas.

Abaixo está um exemplo de layout.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

No código acima, o topo é a área do cabeçalhoheader, a parte inferior é a área do rodapéfooter, a parte do meio émainesidebar。

Se algumas áreas não precisam ser exploradas, use “pontos” (.)expressar.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

No código acima, a coluna do meio é um ponto, o que significa que a célula não é utilizada ou que a célula não pertence a nenhuma área.

Observe que a nomenclatura das regiões afeta as linhas da grade.A linha de grade inicial de cada área é automaticamente nomeada区域名-start, a linha de grade terminada é automaticamente nomeada区域名-end。

Por exemplo, a área é chamadaheader, então as linhas de grade horizontais e as linhas de grade verticais na posição inicial são chamadasheader-start, as linhas de grade horizontais e as linhas de grade verticais na posição final são chamadasheader-end。

3.5 atributo grid-auto-flow

Após a divisão da grade, os elementos filhos do contêiner serão automaticamente colocados em cada grade em ordem. A ordem de posicionamento padrão é "linha primeiro, coluna segundo", ou seja, preencha primeiro a primeira linha e depois comece a colocar a segunda linha, que é a ordem dos números na figura abaixo.

Esta ordem é dada porgrid-auto-flowDeterminado pelo atributo, o valor padrão érow , isto é, "linha primeiro, depois linha".Você também pode configurá-lo paracolumn, torna-se "linha primeiro, depois linha".

grid-auto-flow: column;
1

código acimajá configuradocolumnA partir de agora, a ordem de colocação será a mostrada abaixo.

grid-auto-flowAlém de definir o atributo comorowecolumn, também pode ser definido comorow denseecolumn dense . Esses dois valores são usados ​​​​principalmente para colocar automaticamente os itens restantes após determinadas posições serem atribuídas a determinados itens.

Exemplo abaixoDeixe o projeto nº 1 e o projeto nº 2 ocuparem duas células cada e, em seguida, no padrãogrid-auto-flow: rowNeste caso, o seguinte layout será produzido.

Na imagem acima, a posição atrás do item nº 1 está vazia. Isso ocorre porque o item nº 3 segue o item nº 2 por padrão, portanto, será classificado atrás do item nº 2.

Agora modifique as configurações e defina-as comorow dense, significa "primeira linha, segunda coluna" e preencha-o o mais firmemente possível, sem espaços.

grid-auto-flow: row dense;
1

código acimaO efeito é o seguinte.

A imagem acima preencherá primeiro a primeira linha e depois a segunda linha, então o item 3 seguirá o item 1. Os itens nº 8 e nº 9 serão colocados na quarta linha.

Se você alterar a configuração paracolumn dense, significa "primeiro a coluna, depois a linha" e preencha os espaços tanto quanto possível.

grid-auto-flow: column dense;
1

código acimaO efeito é o seguinte.

A imagem acima preencherá primeiro a primeira coluna e depois a segunda coluna, então o item nº 3 está na primeira coluna e o item nº 4 está na segunda coluna. Os itens 8 e 9 foram espremidos na quarta coluna.

3.6 atributo justificar itens, atributo alinhar itens, atributo colocar itens

justify-itemsA propriedade define a posição horizontal do conteúdo da célula (esquerda, centro, direita),align-itemsA propriedade define a posição vertical (superior, central, inferior) do conteúdo da célula.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

Esses dois atributos são escritos exatamente da mesma forma e podem assumir os seguintes valores.

• start: alinha a borda inicial da célula.
• fim: Alinha com a borda final da célula.
• center: Centro dentro da célula.
• esticar: esticar para preencher toda a largura da célula (valor padrão).

.container {
  justify-items: start;
}
1
2
3

código acimaIndica que o conteúdo da célula está alinhado à esquerda e o efeito é mostrado abaixo.

.container {
  align-items: start;
}
1
2
3

código acimaIndica que o conteúdo da célula está alinhado ao cabeçalho e o efeito é mostrado abaixo.

place-itemsAs propriedades sãoalign-itemsatributos ejustify-itemsA forma abreviada combinada da propriedade.

place-items: <align-items> <justify-items>;
1

Abaixo está um exemplo.

place-items: start end;
1

Se o segundo valor for omitido, o navegador o considera igual ao primeiro valor.

3.7 atributo justificar conteúdo, atributo alinhar conteúdo, atributo colocar conteúdo

justify-contentO atributo é a posição horizontal de toda a área de conteúdo dentro do contêiner (esquerda, centro, direita),align-contentO atributo é a posição vertical de toda a área de conteúdo (superior, central, inferior).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

Esses dois atributos são escritos exatamente da mesma forma e podem assumir os seguintes valores. (As fotos abaixo são todas baseadas emjustify-contentPor exemplo, propriedadesalign-content O diagrama de atributos é exatamente o mesmo, exceto que a orientação horizontal é alterada para orientação vertical. )

• start - a borda inicial do contêiner alinhado.
  
• end - alinha a borda final do contêiner.
  
• center - Centralize o contêiner dentro.
  
• esticar - Quando o tamanho do item não for especificado, estique para ocupar todo o contêiner da grade.
  
• space-around - espaço igual em ambos os lados de cada item. Portanto, o espaço entre os itens é duas vezes maior que o espaço entre os itens e a borda do contêiner.
  
• space-between - Há espaço igual entre os itens e nenhum espaço entre os itens e a borda do contêiner.
  
• space-evenly - O espaço entre os itens é igual e o espaço entre os itens e a borda do contêiner tem o mesmo comprimento.
  
  place-contentAs propriedades sãoalign-contentatributos ejustify-contentA forma abreviada combinada da propriedade.

place-content: <align-content> <justify-content>;
1

Abaixo está um exemplo.

place-content: space-around space-evenly;
1

Se você omitir o segundo valor, o navegador assumirá que o segundo valor é igual ao primeiro valor.

3.8 propriedade grid-auto-columns, propriedade grid-auto-rows

Às vezes, alguns itens recebem posições fora da grade existente. Por exemplo, a grade possui apenas 3 colunas, mas um determinado item é especificado na 5ª linha. Neste momento, o navegador irá gerar automaticamente grades extras para facilitar a colocação dos itens.

grid-auto-columnsatributos egrid-auto-rows As propriedades são usadas para definir a largura da coluna e a altura da linha da grade redundante criada automaticamente pelo navegador.Eles são escritos da mesma maneira quegrid-template-columnsegrid-template-rows Exatamente o mesmo. Se essas duas propriedades não forem especificadas, o navegador determinará a largura da coluna e a altura da linha da nova grade inteiramente com base no tamanho do conteúdo da célula.

Exemplo abaixoNo interior, a grade dividida tem 3 linhas x 3 colunas, mas o item nº 8 é especificado na 4ª linha e o item nº 9 é especificado na 5ª linha.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

O código acima especifica que a nova altura da linha é uniformemente 50px (a altura original da linha é 100px).

3.9 atributo grid-template, atributo grid

grid-templateAs propriedades sãogrid-template-columns、grid-template-rowsegrid-template-areasA forma abreviada combinada dessas três propriedades.

gridAs propriedades sãogrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowA abreviatura combinada dessas seis propriedades.

Do ponto de vista da facilidade de leitura e escrita, recomenda-se não mesclar atributos, portanto esses dois atributos não serão apresentados em detalhes aqui.

4. Atributos do projeto

As propriedades a seguir são definidas no projeto.

4.1 propriedade grid-column-start, propriedade grid-column-end, propriedade grid-row-start, propriedade grid-row-end

A posição do projeto pode ser especificada. O método específico é especificar as quatro bordas do projeto e quais linhas de grade serão posicionadas respectivamente.

• grid-column-startPropriedades: linhas de grade verticais onde a borda esquerda está localizada
• grid-column-endPropriedade: A linha de grade vertical onde a borda direita está localizada
• grid-row-startPropriedades: A linha de grade horizontal onde a borda superior está localizada
• grid-row-endPropriedades: A linha de grade horizontal onde a borda inferior está localizada

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

código acimaEspecifica que a borda esquerda do item 1 é a segunda linha de grade vertical e a borda direita é a quarta linha de grade vertical.

Na imagem acima, apenas as bordas esquerda e direita do item nº 1 são especificadas, e as bordas superior e inferior não são especificadas, portanto será utilizada a posição padrão, ou seja, a borda superior é a primeira linha de grade horizontal, e a borda inferior é a segunda linha de grade horizontal.

Exceto o item nº 1, os demais itens não possuem posições especificadas e são automaticamente dispostos pelo navegador. Neste momento, suas posições são determinadas pelo container.grid-auto-flowDeterminado pelo atributo, o valor padrão deste atributo érow , então eles serão organizados "primeiro a linha e depois a coluna".Os leitores podem alterar o valor deste atributo paracolumn、row denseecolumn dense, para ver como as posições de outros itens mudaram.

Exemplo abaixoÉ o efeito de especificar as posições de quatro fronteiras.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

Os valores desses quatro atributos, além de serem especificados como o número da linha da grade, também podem ser especificados como o nome da linha da grade.

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

No código acima, as posições das bordas esquerda e direita são especificadas como nomes das linhas de grade.

Os valores desses quatro atributos também podem ser usadosspanPalavra-chave que indica "span", ou seja, quantas grades são distribuídas entre as bordas esquerda e direita (bordas superior e inferior).

.item-1 {
  grid-column-start: span 2;
}
1
2
3

código acimaIndica que a borda esquerda do item nº 1 se estende por 2 grades a partir da borda direita.

Isto está relacionado comcódigo abaixoO efeito é exatamente o mesmo.

.item-1 {
  grid-column-end: span 2;
}
1
2
3

Usando esses quatro atributos, se houver sobreposição de itens, usez-indexA propriedade especifica a ordem sobreposta dos itens.

4.2 atributo de coluna de grade, atributo de linha de grade

grid-columnAs propriedades sãogrid-column-startegrid-column-endA forma abreviada combinada degrid-rowAs propriedades sãogrid-row-startatributos egrid-row-endA forma abreviada de fusão.

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

Abaixo está um exemplo.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

No código acima, o projetoitem-1Ocupe a primeira linha, da primeira linha da coluna até a terceira linha da coluna.

Entre esses dois atributos, você também pode usarspanPalavra-chave que indica quantas grades abranger.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

código acimaem, projetoitem-1A área ocupada inclui a primeira linha + segunda linha e a primeira coluna + segunda coluna.

A barra e as partes seguintes podem ser omitidas e abranger uma grade por padrão.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

No código acima, o projetoitem-1Ocupe a primeira grade no canto superior esquerdo.

4.3 atributo de área de grade

grid-areaO atributo especifica a área em que o item é colocado.

.item-1 {
  grid-area: e;
}
1
2
3

código acimaEm , o Projeto nº 1 está localizado emeárea, o efeito é mostrado abaixo.

grid-areaAs propriedades também podem ser usadas comogrid-row-start、grid-column-start、grid-row-end、grid-column-endO formulário de abreviatura mesclado especifica diretamente a localização do projeto.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

Abaixo está umexemplo。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4.4 atributo justificar-se, atributo alinhar-se, atributo colocar-se

justify-selfA propriedade define a posição horizontal (esquerda, centro, direita) do conteúdo da célula, seguida porjustify-itemsAs propriedades são usadas exatamente da mesma forma, mas se aplicam apenas a um único item.

align-selfA propriedade define a posição vertical (superior, central, inferior) do conteúdo da célula, seguida poralign-itemsO uso de atributos é exatamente o mesmo e afeta apenas um único projeto.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

Ambas as propriedades podem assumir os quatro valores a seguir.

• start: alinha a borda inicial da célula.
• fim: Alinha com a borda final da célula.
• center: Centro dentro da célula.
• esticar: esticar para preencher toda a largura da célula (valor padrão).

Abaixo estájustify-self: startexemplo de.

.item-1 {
  justify-self: start;
}
1
2
3

place-selfAs propriedades sãoalign-selfatributos ejustify-selfA forma abreviada combinada da propriedade.

place-self: <align-self> <justify-self>;
1

Abaixo está um exemplo.

place-self: center center;
1

Se o segundo valor for omitido,place-selfA propriedade considerará os dois valores iguais.