Movendo itens no layout de grade CSS [Guia]
Usando o Módulo de Layout de Grade CSS em web design torna-se cada vez mais viável à medida que mais navegadores começam a apoie isso. Ao criar layouts preenchendo células da grade, pode chegar um momento, no entanto, quando você quiser alcançar coisas mais complicadas.
Por exemplo, você pode querer deslocar-se ligeiramente alguns dos itens da grade presos em suas áreas de grade. Você também pode querer mova-os para fora do contêiner de grade (estouro) ou uns sobre os outros (sobreposição), ou apenas ... para algum espaço vazio ao redor.
Então, neste post, eu vou te mostrar como você pode itens de movimento, ordem, estouro, sobreposição e grade de tamanho quando você usa o módulo de layout de grade CSS.
Crie uma grade CSS
Primeiro, vamos criar uma grade CSS simples com uma linha e três colunas.
No HTML, criamos um monte de divs em que o contêiner de grade contém os três itens da grade.
No CSS, o contêiner de grade tem o display: grade; propriedade e os itens da grade ter área de grade que identifica os nomes das áreas de itens da grade.
Nós também Adicione o áreas de modelo de grade propriedade ao contêiner de grade, no qual os nomes da área da grade são usados para atribuir as áreas da grade às células da grade que elas representam.
Todas as colunas tome o tamanho de uma fração (fr) da largura do contêiner, garantindo a contenção dos itens da grade.
.grid-container exibição: grid; grid-template-areas: 'esquerda centro direita'; grid-template-columns: repetição (3, 1fr); grid-template-rows: 80px; intervalo de grade: 5px; largura: 360px; cor de fundo: magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div background-color: lightgreen;
Itens de grade de estouro
Você pode fazer um item de grade transbordar seu contêiner de grade se é necessário para um layout. Para alcançar o efeito de estouro, você só precisa use um tamanho de coluna diferente:
.grid-container exibição: grid; grid-template-areas: 'esquerda centro direita'; grid-template-columns: repeat (3, 150px); intervalo de grade: 5px;
o soma do tamanho da coluna e do espaço é maior que o largura do recipiente, que faz com que os itens da grade transbordem seu contêiner.
Sobrepor itens da grade
UMA item de grade pode se sobrepor (cobertura total ou parcial) outro item da grade nos seguintes casos:
- Está definido para abranger (e sobre) a (s) célula (s) de outro item da grelha.
- Seu tamanho foi aumentado, fazendo com que ele se sobreponha ao item de grade próximo.
- Ele foi movido em cima de outro item da grade.
Vamos discutir o segundo e terceiro casos mais tarde, no “Dimensionamento” e “Movendo-se” Seções.
Primeiro, vamos ver o primeiro caso quando um item da grade se estende por outro.
O item da grade no centro tem medido sobre o esquerdo, então apenas dois itens são visíveis na tela.
.centro de grade área de grade: centro; coluna de grade: 1/3;
o coluna de grade e linha de grade propriedades atribuir linhas de grade entre o qual uma coluna ou linha precisa se encaixar.
No diagrama abaixo, você pode ver como o coluna de grade: 1/3 Trabalhos de regra de CSS: a coluna central abrange entre as linhas de grade 1 e 3. Como resultado, a coluna central se sobrepõe à esquerda.
Mover itens da grade
Ao mudar, quero dizer movendo os itens ligeiramente ao redor. Se você quiser realocar completamente um item em outra célula / área de grade, recomendo que você atualize o código de criação da grade..
Movimentar-se pelos itens da grade é simples. Somente use o margem, a transformar, ou o posição: relativa; propriedades. Veja abaixo como os itens são movidos usando essas propriedades.
Os itens da grade central e direita podem ser movidos (conforme mostrado acima) das seguintes maneiras:
1. Usando margem
As margens negativas aumentam as dimensões dos itens da grade, enquanto as margens positivas as reduzem. Usando uma combinação de ambos, você pode deslocar os itens da grade ao redor.
.centro de grade área de grade: centro; margin-left: -10px; margem direita: 10 px; margem superior: -10px; margem inferior: 10px; .grid-right grid-area: right; margin-left: 10px; margem-direita: -10px; margem superior: -10px; margem inferior: 10px;
2. Usando transformar
o traduzir() Função CSS move um elemento ao longo dos eixos xey. Usando-o junto com o transformar propriedade permite que você altere a posição de um item da grade.
.centro de grade área de grade: centro; transformar: translate (-10px, -10px); .grid-right grid-area: right; transformar: translate (10px, -10px);
3. Usando posição
Usando o posição: relativa; regra com o especificado topo, inferior, esquerda, e certo propriedades podem ser usadas para mover itens de grade também.
.centro de grade área de grade: centro; posição: relativa; fundo: 10px; direita: 10px; .grid-right grid-area: right; posição: relativa; fundo: 10px; esquerda: 10px;
Ordenar itens da grelha
Itens de grade são renderizados na tela na ordem em que aparecem no código-fonte HTML.
Na seção anterior, quando o item central foi movido para a esquerda, ele foi colocado no topo do item à esquerda pelo navegador. Isso aconteceu porque no HTML, No entanto, podemos alterar os itens da grade de pedidos usando o Usando o Como no módulo CSS Grid Layout, alterando a ordem dos elementos em HTML não afeta o layout da grade, você também pode colocar Se você usar linhas ou colunas dimensionadas automaticamente para um item de grade (usando Lembre-se, em nossa grade de amostra, todas as três colunas recebem uma fração ( Aqui, nós mudamos o tamanho do item da esquerda usando o Aqui, nós mudamos o tamanho do item da esquerda usando o z-index ou o ordem Propriedades CSS.
z-index: 1; regra, o item da grade esquerda tem um contexto de empilhamento maior.. grid-left grid-area: esquerda; z-index: 1;
Itens de grade de tamanho
auto, fr, gr unidades), ele encolherá para criar espaço para o item vizinho que cresceu em tamanho somente se dito item não foi dimensionado por transformar ou uma margem negativa.fr) do contêiner da grade. Dê uma olhada em como os três itens se parecem depois que a esquerda é redimensionada de duas maneiras diferentes.1. Sized com
largura e alturalargura e altura propriedades. Como resultado, ele permanece dentro do contêiner de grade.
.grid-left grid-area: esquerda; largura: 200px; altura: 90 px;
2. Sized com
transformartransformar propriedade. Como resultado, ele transborda o contêiner e a abertura da grade também desaparece.
.grid-left grid-area: esquerda; transformar: scalex (1,8);
