Adquira o hábito de escrever juntos! Este é o primeiro dia da minha participação no "Nuggets Daily New Plan · April Update Challenge", clique para ver os detalhes do evento .
Protótipos e pensamento
Como mostrado na figura, é para implementar um ranking de cidades simples
Alguns pontos a serem observados
- Duas colunas fixas com um intervalo fixo entre as duas colunas. Mas o número de linhas não é fixo, e quantas linhas são preenchidas automaticamente de acordo com a altura do container;
- Os itens de dados preenchem primeiro a primeira coluna e depois a segunda coluna;
- O layout requer um certo grau de adaptabilidade.O item de dados pode ter uma altura fixa, mas não uma largura fixa (porque a largura de todo o contêiner é adaptável através de unidades vw);
- O item de dados deve ser centralizado verticalmente;
Flex ou Grade
Na verdade, o título do artigo revela que o layout do grid será usado para alcançá-lo, mas alguns amigos ainda podem questionar: "Eh? O que você pode fazer com o Grid, eu também consigo com o layout Flex! Não é possível, a mesa antiga também pode ser uma. Uma célula para isolar o efeito final?"
Mas com toda a justiça, nenhuma tecnologia é uma bala de prata e o jQuery não é invencível, mas é adequado apenas para quais cenários.
Pessoalmente, acho que o layout linear de linha única é adequado para o layout Flex, como a disposição do texto; mas para o layout regional plano, o Grid é mais adequado, como o Jiugongge e similares. Vamos tentar implementá-lo.
caso final
Interpretação das propriedades da grade
grid-template-columnsDefina a largura da coluna da grade
Existem cinco valores
- Largura fixa da coluna, número fixo de colunas
/* 设置两列，每一列宽20像素 */
grid-template-columns: 20px 20px;
/* 通过repeat()函数，重复2列，列宽都是20像素 */
grid-template-columns: repeat(2, 20px);
/* 也可以设置百分比作为列宽 */
grid-template-columns: 33% 33% 33%;
复制代码- Largura de coluna fixa, não número fixo de colunas
/* 列宽20像素，但不确定有多少列，按照容器自动铺满 */
grid-template-columns: repeat(auto-fill, 20px);
复制代码- Largura de coluna não fixa, número fixo de colunas
/* 设置两列，每一列占一份（相当于设置为50% 50%） */
grid-template-columns: 1fr 1fr
/* 通用可以使用repeat()函数 */
grid-template-columns: repeat(2, 1fr)
复制代码- Sem largura de coluna fixa, nem número fixo de colunas
/* minmax函数：设置该列最小最大多宽 */
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
/* auto关键字：该列的宽度自适应，减去其他列的宽度后，所剩的宽度就是该列的宽度 */
grid-template-columns: 20px auto 20px;
复制代码[columnName]Especifique os nomes das colunas
/* 设置了两列，第一列名称为c1，第二列名称为c2 */
grid-template-columns: [c1] 20px [c2] 20px;
复制代码Da mesma forma, defina o atributo de altura da linha grid-template-rows, o intervalo de valores é o mesmo
grid-auto-columndefinir grade implícita
Grade implícita e grade explícita: a grade explícita é colocada dentro do contêiner Grid e a grade implícita é colocada fora do contêiner, ou seja, a grade extra. As regras de atribuição grid-template-columnssão exatamente as mesmas que sim.
grid-auto-flowAlgoritmo de Layout de Controle
No layout de Grade, os elementos de grade grid-auto-flwo: row são colocados na ordem "primeiro a linha e depois a coluna" por padrão, ou seja, "primeiro a linha inteira, depois a coluna"
.wrapper {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-auto-flow: row;
grid-gap: 5px;
grid-auto-rows: 50px;
}
复制代码O efeito de layout CSS acima é o seguinte
Observe aqui que há um espaço vazio após o Cinco, e o Seis é colocado em uma nova linha. Isso também é fácil de entender, pois Seis é gordo demais para caber, e Sete acha que está na mesma fila que Seis, então fica um espaço vazio. Você pode deixá-lo subir sozinho? Sim, você pode configurá grid-auto-flwo: row dense-lo para um layout compacto. O efeito é o seguinte:
Voltando ao nosso caso, se você quiser fazer o inverso, preencha primeiro cada coluna e depois preencha a linha, você pode alterar para grid-auto-flwo: columnver se a direção de Um e Dois é a primeira coluna e depois a linha.
grid-gapdefinir intervalo
grid-gapÉ a propriedade abreviada de grid-column-gapsum grid-row-gap, como o nome sugere, é definir o intervalo entre colunas e entre linhas e linhas. Isso é relativamente simples, então não vou falar mais, mas o layout Flex não tem o atributo gap e não pode definir o gap entre os elementos, porque a essência do layout Flex é um layout linear. Através dessas propriedades, bem como das características do layout Grid, compare o Flex, que é mais flexível, acho que você deve ter a resposta. Claro, a compatibilidade do layout do Grid também tem sido controversa, mas isso não nos impede de aprendê-lo.