Home-theater-designers
Posicionar elementos em uma página web pode ser muito complicado quando se trabalha com layouts complexos. É aqui que a grade CSS se torna útil. É um sistema de layout projetado para simplificar o processo de criação de layouts complexos.
Como isso ajuda você? Ao contrário dos métodos de layout tradicionais que permitem apenas posicionar elementos em linhas ou colunas, a grade CSS oferece o melhor dos dois mundos: uma abordagem 2D usando linhas e colunas.
Contêineres e itens de grade
Você pode aplicar propriedades de grade CSS a dois tipos principais de elementos: pai e filho. Quando você define a propriedade display como 'grid' para um elemento pai, ele transforma esse elemento em um contêiner de grade. Qualquer elemento filho dentro deste contêiner de grade se torna um item de grade, herdando as propriedades da grade aplicadas.
Veja como ele é representado:
Um item de grade também pode se tornar um contêiner de grade. Agora você pode se referir ao layout como uma grade aninhada – uma grade dentro de uma grade. O contêiner de grade principal agora é chamado de grade externa, enquanto o contêiner de item transformado em grade se torna uma grade interna.
Cada uma dessas grades opera independentemente da outra, o que significa que as propriedades definidas para uma grade interna não afetam o layout da grade externa e vice-versa.
Aqui está o que parece:
Dominar o relacionamento entre contêineres de grade e itens é essencial para construindo layouts bidimensionais efetivamente.