Anatomia da Grade CSS é composto pelo recipiente primário qual é apenas o seu padrão
elemento que tem um margem, fronteira e preenchimento. Para criar um contêiner de grade CSS pai com qualquer elemento, inclua display: grid para isso. Grade Itens são crianças aninhado dentro do contêiner pai. Eles são geralmente definidos como um Lista de elementos que poderiam representar um cabeçalho, Barra Lateral, rodapé ou elementos de layout de site semelhantes, dependendo do design do aplicativo.
Nesse caso, existem 3
Itens. O terceiro é esticado por 2 células.
Aviso prévio linhas pode ser contado para trás também usando sistema de coordenadas negativo.
A grade acima é 5 de 4células em dimensão. É definido da seguinte forma:
Número de linhas e colunas é assumido implicitamente pelo número de valores definidos.
Entre cada célula existe um linha e um opcional Gap = Vão.
Linhas e colunas Entre o linhas são referidos como da grade faixas.
Sempre têm[[[[célula+1 1]linhas por dimensão.
Portanto 5 colunas terão 6 linhas enquanto que 4 linhas terão 5 linhas.
No exemplo a seguir, existem 7colunas e somente 1 1linha:
O primeiro importante O que você notará sobre a grade CSS é que linhas externas não são afetados pelo tamanho do espaço. Somente linhas internas. Vamos aprofundar isso um pouco mais adiante neste tutorial, quando analisarmos o fracionário (fr) unidades.
A grade CSS é bidirecional. Seus itens podem fluir tanto horizontalmente (coluna) ou verticalmente (linha) Defina o valor com a propriedade grid-auto-flow.
Funciona como o Flex:
Pense na grade desta maneira abstrata:
Ok – então tivemos a ideia básica de como funciona.
A parte criativa é exibida quando você se depara com o problema de manipular os canais do item para criar um layout sensato do aplicativo. CSS Grid oferece várias propriedades para fazer exatamente isso. Vamos dar uma olhada neles na próxima seção deste tutorial em apenas um momento.
Vamos consolidar nosso conhecimento até agora, analisando estes exemplos:
Eu usei apenas dois
elementos para os itens. Portanto, a grade acima.
Mas o que acontece se nós adicione mais um item para a lista?
Adicionar o item 3 ao mesmo layout automaticamente estenda-o (item azul.)
Esse novo espaçamento é criado automaticamente de copiando valores da primeira linha.
Vamos adicionar Item 4 devemos?
E, novamente, nossa grade de CSS tomou uma decisão de esticar Item 4 através do espaço restante na segunda linha. Isto é porque linhas de modelo de grade espaço suficiente especificado apenas para 1 linha. O resto é automático.
A colocação de itens azuis não é explicitamente especificado por você. Isto é implícito (automático) posicionamento. Eles meio que caem nesse espaço.
Posicionamento explícito do conteúdo
Isso é exatamente o que você esperaria das células da grade se você definir valores personalizados para todos os itens da lista:
Basicamente, você pode obter controle sobre o espaço em todas as linhas consecutivas adicionando mais valores a linhas de modelo de grade propriedade. Observe que os itens não são mais implícito aqui. Você os definiu para serem exatos. (25px 75px)
A grade CSS oferece algumas propriedades para expandir automaticamente suas células por uma quantidade variável / desconhecida de espaço.
Aqui estão os principais exemplos para coluna e linha fluxo automático casos:
O exemplo inferior demonstra o uso de auto palavra-chave Isso significa apenas que a célula se estenderá para preencher, no entanto, resta muito espaço no contêiner pai depois de já ter sido preenchido por explicitamente itens colocados.
Falando sobre grade CSS, você não pode deixar de falar sobre lacunas. Lacunas são os espaços horizontais e verticais entre as células da grade.
As lacunas são controladas usando gap-coluna-grade e intervalo de linha de grade propriedades:
Você pode usar intervalos diferentes nas duas dimensões. talvez isso possa ser útil para criar galerias de vídeo ou imagem:
Lacunas através das dimensões (colunas e linhas) podem diferir em tamanho. Mas o tamanho da lacuna é especificado uma vez para todas as lacunas na grade em uma determinada dimensão. Como você pode ver aqui – lacunas de tamanho variável dentro da mesma dimensão não é permitido:
Eu realmente gostaria que possíveis diferenças de tamanho fossem possíveis. Eu posso ver como isso pode realmente ser útil. Alguns sugerem o uso de faixas vazias para obter uma semelhante efeito.
Fracionário (fr) são exclusivas da grade CSS.
#grid {
grid-template-columns: 1fr 1fr 1fr
}
UMA fracionário A unidade aloca em relação a todos os outros elementos no pai:
O comportamento muda mas 1fr permanece o mesmo, independentemente quando valores diferentes são usados. Unidades fracionárias funcionam semelhante a valores em% mas eles são mais fáceis e mais intuitivo dividir espaço com:
O comportamento das unidades fracionais (unidade fr) é alterado com base em todos os valores fornecidos em qualquer dimensão.
Apenas neste exemplo colunao comportamento contrário é mostrado por uma questão de simplicidade. Mas funciona da mesma forma para as linhas também. Basta usar linhas de modelo de grade propriedade.
O espaço definido usando unidades fracionárias muda com base nas lacunas. O mesmo 1fr dentro do mesmo pai diminuirá para um tamanho menor quando forem adicionadas lacunas:
O espaço definido usando unidades fracionárias muda com base nas lacunas. O mesmo 1fr dentro do mesmo pai diminuirá para um tamanho menor quando forem adicionadas lacunas:
Aqui, adicionamos espaços nas células especificadas usando fr unidades.
Como você pode ver, isso fornece um conjunto muito bom de propriedades para espaçar o conteúdo basicamente da maneira que você desejar, sem se preocupar com os valores de pixel.
Essas novas dinâmicas tornam pixel-perfect design como coisa do passado. Vamos agora pensar no design do layout usando a abordagem intuitiva!
Por fim, para ter uma idéia melhor do uso não inteiro unidades fracionárias aqui é uma grade divertida que criei. Você pode especificá-los usando ponto flutuante números também:
Acabamos de dissecar a anatomia da grade CSS. Espero que você tenha uma idéia melhor de como a grade CSS estruturas conteúdo. Mas agora precisamos ser criativos e colocar alguns itens dentro dela. Como isso é feito pode modificar o comportamento padrão da grade CSS. Vamos explorar como isso acontece nesta seção.
Para organizar seus itens células ou áreas de modelo na grade, você os consultará linhas entre células. Não
–gostar vãos.
Grade CSS permite usar vãos para determinar largura e altura da área de conteúdo (no espaço celular) como mesas. Vamos explorar isso daqui a pouco. Mas você ainda pode e provavelmente deve especificar a célula inicial usando números de linha ou linhas nomeadas (mais sobre isso daqui a pouco.) Isso depende da sua preferência ..
Quanto ao posicionamento do conteúdo em várias células, a coisa mais óbvia e tentadora é extensão celular.
Você pode estender um item por várias células.
Importante: A extensão muda a localização dos itens circundantes.
Usando coluna de grade e linha de grade propriedades no próprio elemento do item:
o itens azuis local alterado depois de fazer Item 7 abrangem várias células. E itens de laranja foram colididos por uma fileira.
Há também outra maneira de fazer a mesma coisa…
… Fim da coluna da grade, grid-row-start e fim de linha da grade você pode especificar pontos iniciais e finais reais nos quais deseja estender o conteúdo da célula.
Eu removi os itens nos últimos 15 (laranja) porque não precisamos mais deles:
Digite essas propriedades diretamente no item que você deseja que elas sejam afetadas.
Como esticar o conteúdo coluna e linha linhas funciona em ambas as direções.
Os valores conteúdo mínimo e conteúdo máximo são fornecidos para colunas de modelo de grade ou linhas de modelo de grade propriedades como qualquer outro valor relacionado ao tamanho (por exemplo, px, 1fretc.)
Vamos dar uma olhada neste espécime. É o nosso ponto de partida. Vamos mudar um pouco as coisas para ver como mínimo máximo valores afetam as células.
Vamos ver que tipo de resultado será produzido se mudarmos uma das colunas para conteúdo mínimo e conteúdo máximo:
Com uma palavra texto, não há diferença entre os resultados observados, se usamos conteúdo mínimo ou conteúdo máximo. Aqui é porque Olá é uma única palavra. Está min e max valores são exatamente os mesmos.
Mas as coisas ficam interessantes com textos mais complexos. O exemplo a seguir demonstrará a idéia básica por trás conteúdo mínimo e conteúdo máximo:
Aqui conteúdo mínimo usou a palavra mais longa da frase (desconhecido) Como largura base.
Ao usar conteúdo máximo toda a cadeia de texto com espaços preencheu o espaço.
Mas o que acontece se aplicarmos conteúdo mínimo ou conteúdo máximo para todos células?
Percebi que, por padrão, o texto estava centralizado sempre que eu usava conteúdo mínimo nele embora alinhamento de texto: centro não foi definido no item.
Eu coloquei a imagem dessa Rosa Azul para dentro da célula.
E, como esperado, a grade foi expandida para alocar espaço suficiente:
Quando defino explicitamente a largura da imagem como 50%Só para ver o que acontece Grade CSS ainda manteve largura da célula para 100% do imagem mas a imagem exibida com 50% de largura (como esperado) e centrado automaticamente na horizontal dentro da célula.
Texto e imagens (ou qualquer conteúdo) serão automaticamente centralizados nas células da CSS Grid por padrão.
Até o momento, falamos sobre a estrutura do Grid em geral.
Na próxima seção, veremos como obter flutuações “multidirecionais” dentro das células. Nós não vamos usar flutuador propriedade aqui, é claro.
Não acho que a especificação CSS Grid chame isso. Mas, de fato, é possível criar exatamente isso … um Comportamento flutuante de 360 graus.
Isso funciona em ambos na linha e bloqueio elementos! E acho que esse é o meu recurso favorito de todo o conjunto de habilidades da CSS Grid.
Todos 9 combinações são possíveis usando alinhar-se e justificar-se propriedades.
Eles são explicados abaixo.
Essa propriedade ajuda a posicionar o conteúdo verticalmente.
Usar alinhar-se: iniciar para alinhar o conteúdo com a borda superior da célula.
Usar alinhar-se: centro para alinhar o conteúdo ao meio vertical.
Usar alinhar-se: fim para alinhar o conteúdo com a parte inferior da célula.
Essa propriedade ajuda a posicionar o conteúdo horizontalmente.
Usar justificar-se: iniciar para alinhar o conteúdo com a borda esquerda da célula.
Usar justificar-se: centro para alinhar o conteúdo ao meio horizontal.
Usar justificar-se: fim para alinhar o conteúdo com a borda direita da célula.
Você pode usar qualquer um dos 9justificar-se x alinhar-se combinações para alinhar qualquer coisa em qualquer lugar aka flutuador multidirecional.
As áreas do modelo são definidas usando áreas de modelo de grade propriedade.
Observe que as áreas de modelo para cada linha estão incluídos em aspas duplas.
Cada coluna é separado pelo espaço.
Neste exemplo, eu simplesmente expliquei como nomear ares. Para tirar proveito real das áreas do modelo, você precisa categorizar blocos retangulares de células pelo mesmo nome.
Blocos Tetris não são permitidos. Você só pode usar retângulos:
Aqui Esquerda é uma área que mede 3 células para baixo. CSS Grid trata automaticamente como um único bloco. O mesmo vale para Direita. Neste exemplo simples, criei duas colunas. Mas você entendeu. Bloqueie áreas maiores, nomeando-as.
Para colocar um item nessa área, basta adicionar grid-area: TemplateName. Nesse caso, é área da grade: esquerda ou área da grade: Direita.
Os nomes de área do modelo não podem usar espaços. Eu usei traços aqui.
Agora entendemos como bloquear áreas retangulares. Vamos dar uma olhada em um cenário potencialmente real. Aqui vou demonstrar um layout muito básico.
Eu bloqueei um layout de site muito simples com dois barras laterais, uma cabeçalho e rodapé áreas. A área principal está no Centro ocupando 3 x 2 espaço celular:
grid-template-areas: 'z y y y y'
'x center center center w'
'x center center center w'
'x z z z z';
Áreas de modelo de grade, estilo CSS.
Left
Header
Footer
Right
Main
HTML
Só precisamos de 5 itens aqui. Adicione mais e eles serão empurrados para fora da área da grade principal para células implícitas.
Apenas certifique-se de manter sempre suas áreas quadrado ou retangular.
Em vez de sempre se referir às linhas pelo número, também é possível nomeá-las. Dessa forma, eles serão fáceis de lembrar para esticar itens em várias células. Os números podem ficar entediantes!
Abaixo está uma representação de como ela se parece:
Use colchetes para nomear suas linhas. Em seguida, use esses nomes ao especificar o comprimento que seus itens precisam abranger usando / barra.
Casos de Uso
Seu layout depende da finalidade do seu site.
Agora que sabemos os recursos básicos da grade CSS, vamos aplicá-los em um exemplo prático.
Criaremos um layout para dispositivos móveis primeiro, usando as seguintes diretrizes:
Tentei descobrir o que realmente ganhamos com cada divisão de coluna.
Projetos de uma coluna ajude-nos a colocar todo o nosso conteúdo em uma longa lista vertical.
Projetos de duas colunas estão bem para mini (tablet?) galerias de imagens / portfólios.
Projetos de colunas em árvore são os primeiros desse tipo a oferecer bordas (margens).
Projetos de quatro colunas funcionam bem como galerias de imagens em tela cheia.
Percebi layouts de colunas de número ímpar (≥ 1) trabalhar para baseado em fronteiraslayouts.
Usar frunidades para fazê-los expandir como você faria margem: auto em elementos regulares. Não importa se é 1fr ou 2fr ou n-fr para bordas, desde que o conteúdo principal seja especificado usando pixels ou um grande (r) frvalor (10fr, 20fr, etc):
A única diferença aqui é que Médio usa 1000px para conteúdo amplo e 700px para a coluna principal do artigo. Mas a ideia é a mesma.
Até agora criamos o andaime primário. Mas e quanto responsivoProjeto?
Grade CSS torna as coisas mais fáceis do que você pensa!
Lembrar:conteúdo responsivo! = bordas responsivas. As duas técnicas devem ser tratadas separadamente. Mas … Muitas vezes – como neste caso – é possível resolver o problema de conteúdo responsivo resolvendo o problema. fronteira responsiva problema.
E se você pode usar sua criatividade para resolver vários problemas usando uma técnica … tanto melhor. Dito isto, neste caso, podemos resolvê-lo simplesmente comutação vias externas do seu modelo para 0,5fr (a roxo e azul .) Ademais, alternar entre período ou o áreas de modelo para expandir em várias colunas, criando amplo espaço para o conteúdo. (A área rosa acima.) Você pode fazer isso via consultas de mídia ou Javascript.
Finalmente … altere a faixa principal (verde) para 10fr. (Você pode usar um valor semelhante, mas ≥10 geralmente funcionará bem.) Isso redimensionará automaticamente sua faixa principal (verde) para a resolução de tela atual. Como as duas fronteiras estão agora 0,5fr, tudo, incluindo bordas e conteúdo, será dimensionado corretamente.
Se você precisar remover 0,5fr bordas completamente, você pode configurá-las para 0fr. Mas eu pessoalmente gosto de ter um pequena borda em visualizações para celular. Apenas faz com que a faixa de conteúdo pareça melhor na minha opinião.
Depois que todas as etapas acima forem seguidas … Quando compactadas em um espaço menor, você deverá chegar a algo assim (mostrado acima).
Lição aprendida aqui?
Sempre tente encontrar a solução mais elegante. Ou seja, é limpo, descomplicado e, se possível, resolve vários problemas aplicando uma única alteração (ou duas). Isso não é tão difícil quanto parece.
Essa é a única solução? Não.
Esta é uma solução perfeita? Não.
Mas resolve o problemae funciona– o suficiente para criar layouts móveis simples.
E tudo isso é uma coisa boa a se buscar. A abordagem mostrada neste tutorial é:
1 Mais gratificante e divertido 2) É respeitável. 3) Ele convida você a realmente entender como e por que algo funciona. 4) É simples. Portanto, cria um código fácil de manter. 5) Produz código limpo. 6 Mantém sua consciência limpa.
Falando nisso … caso contrário … você pode começar a “invadir” o código. (Tentando resolver problemas por tentativa e erro, muitas vezes sem entender como ele realmente funciona.) Você ainda fará as coisas dessa maneira. E provavelmente até sentir realização de alguns sortes. Mas … não vai ser divertido.
CSS Grid é um assunto abrangente. Portanto, isso é não um tutorial completo da Grade CSS sobre como criar layouts CSS reais. Simplesmente usei um exemplo para cada parte separada como ponto de partida para alguém novo na grade.
Esperamos que as informações aqui tenham um interesse perspicaz e inspirado na criação de sites usando CSS Grid.
A Grade CSS não é apenas um elemento HTML. É um sistema inteiro para criar sites responsivos e aplicativos da web.
Está propriedadese valores descreva o conglomerado de técnicas aprendidas em mais de uma década criando sites usando tags HTML comuns.
Deseja ver todas as propriedades CSS explicadas visualmente?
