Como faço para fazer uma caixa de contêineres em html

Para representar qualquer elemento, geralmente criamos formas diferentes para propósitos. Mais especificamente, a caixa é uma das formas mais usadas. No HTML, a caixa de contêiner contém algum conteúdo. Para fazer uma caixa de contêineres em HTML, você pode utilizar o elemento "" ou o contêiner "grade".

Os resultados deste blog são:

• Método 1: Como criar caixa de contêiner em html usando a tag?
• Método 2: Como criar caixa de contêiner em html usando o contêiner "grade"?
• Como justificar o conteúdo de uma caixa de contêineres em html?

Método 1: Como criar caixa de contêiner em html usando a tag?

Em html, primeiro, crie um “"Com o nome"caixa”. Então, adicione um

Tag dentro dele para incluir algum conteúdo na página:

Esta é uma caixa.

Na seção CSS, aplique propriedades de estilo aos elementos HTML para decorá -los.

Caixa de estilo div

.caixa
margem: automático;
Largura: 200px;
Altura: 200px;
preenchimento: 10px;
Fronteira: 5px Solid Crimson;

O ".caixa”É usado para acessar a caixa div. Abaixo está a explicação das propriedades aplicadas a ele:

• ““margem”Com o valor definido como“auto”, É usado para dar espaço igual à div.
• ““largura”Propriedade define a largura do elemento para“200px”.
• ““altura”Propriedade define a altura do elemento“200px”.
• ““preenchimento”A propriedade recebe um valor de“10px”, O que adiciona espaço de 10 px em torno do conteúdo da div.
• ““fronteira" é "5px sólido carmesim”, Onde 5px indica a largura da fronteira, o sólido é o tipo de borda, como ranhura, tracejada, pontilhada e muito mais, e depois mostra a cor da cor da fronteira.

Saída

Agora, vamos para o próximo método.

Método 2: Como criar caixa de contêiner em html usando o contêiner "grade"?

O elemento funciona como um contêiner quando é “mostrar”A propriedade é definida como“grade embutida" ou "grade”. Os recipientes de grade compreendem linhas e colunas que contêm itens de grade.

Vamos passar pelos exemplos a seguir para demonstrar como fazer um contêiner de grade.

Exemplo 1: Crie caixa de contêiner em HTML usando a propriedade "Display: Grid"
O "mostrar”Propriedade com o valor“grade”É utilizado para fornecer o layout da página da web em colunas e linhas. Esta propriedade nos ajuda a projetar o layout sem usar propriedades de posição e flutuação.

Para fazer isso, primeiro, crie um com o nome da classe “recipiente”. Dentro disso, adicione vários outros divs com algum conteúdo:

Maçãs
Bananas
Laranjas
Pêssegos
Uvas
Damasco

Vamos transformar a exibição do contêiner HTML como uma grade com CSS.

Div contêiner de estilo

.contêiner
Exibição: grade;
colunas de grade-template: automático automático;
Background-Color: #40966C;
preenchimento: 10px;
Gap: 20px;

A div container é aplicada com as seguintes propriedades:

• ““mostrar”A propriedade recebe o valor“grade”.
• ““colunas de grade-template" como "Auto Auto Auto”, Que especifica que deve haver três colunas na grade.
• ““cor de fundo”A propriedade é definida como“#40966C”.
• ““preenchimento" como "10px”Especifica o espaço de 10px em torno do conteúdo da div.
• ““brecha"É definido como"20px”Para especificar o espaço entre as colunas.

Veremos o comportamento da propriedade Gap na seção posterior.

Estilo div elementos do contêiner div

.Container> div
Background-Color: #C4D1CB;
Alinhamento de texto: centro;
preenchimento: 20px automático;
Size da fonte: 35px;

O ".Container> div”É usado para representar que queremos estilizar o elemento div, que é o filho de contêiner div. Mais especificamente, o “>”O sinal é conhecido como seletor infantil.

Abaixo estão as propriedades aplicadas ao contêiner div:

• ““cor de fundo”Propriedade especifica a cor do fundo do elemento.
• ““alinhamento de texto"É definido como"Centro”Para centrar alinhando o conteúdo da div.
• ““preenchimento"É especificado como"20px Auto”, Onde 20px é o espaço no fundo superior, e o automóvel indica o espaço igual dos lados esquerdo-direita.
• ““tamanho da fonte”Valor da propriedade definido como“35px”Como o tamanho da fonte.

Abaixo está a saída correspondente do código acima mencionado:

Exemplo 2: Crie uma caixa de contêineres em HTML usando a propriedade "Display: Inline-Grid"
O "mostrar”Propriedade com o valor“grade embutida”Cria uma caixa de contêiner em nível em linha.

CSS
A propriedade Display do contêiner DIV acima mencionado está definido como grade embutida:

Exibição: grade embutida;

Saída

Exemplo 3: Criar caixa de contêineres em HTML usando a propriedade “Grid-Template-Columns”
O "colunas de grade-template”A propriedade define a largura da coluna do contêiner e seu número relevante de colunas:

colunas de grade-template: automático automático;

Isso resultará em três colunas com tamanho igual. No entanto, você pode definir a largura da coluna de acordo com sua preferência:

Exemplo 4: Crie caixa de contêiner em HTML usando a propriedade “Grid-Template-Rows”
Esta propriedade define a altura e o número das linhas do contêiner:

ROAS DE TEMPO DE GRIDA: Auto Auto 100px;

A sintaxe acima resultará em duas linhas com alturas iguais e a terceira como “100px”:

Até agora, discutimos como adicionar linhas e colunas ao nosso recipiente de grade. Na próxima seção, demonstramos o exemplo para justificar o conteúdo do contêiner.

Como justificar o conteúdo de uma caixa de contêineres em html?

O "Justify-Content”A propriedade pode ser utilizada para alinhar toda a grade dentro do recipiente. Para fazer com que essa propriedade funcione, a largura total da grade deve ser menor que a largura do contêiner.

Esta propriedade possui vários valores listados abaixo:

• começar
• fim
• espaço-mesmo
• espaço-around
• espaço entre
• Centro

A descrição dos valores acima do rumo será discutida praticamente.

Exemplo 1: Center justifica o conteúdo de uma caixa de contêineres em HTML
Na seção CSS, defina o “mostrar"Propriedade como"grade”E depois adicione a propriedade“Justify-Content”E atribua o valor“Centro”:

Justify-Content: Center;

Pode -se observar que o conteúdo da grade foi alinhado com sucesso:

Exemplo 2: Personalize lacunas gerais de uma caixa de contêineres em HTML
Você pode personalizar as lacunas de grade usando o “brecha”Propriedade da seguinte maneira:

Gap: 20px;

Pode -se observar que as lacunas de 20px são adicionadas com sucesso ao recipiente de grade:

Exemplo 3: Personalize lacunas de linha de uma caixa de contêineres em html
O "ROW-GAP”A propriedade é usada para inserir especificamente o espaço entre as linhas. No exemplo, definiremos as lacunas entre as linhas de contêiner como “20px”:

ROW-GAP: 20px;

Saída

Exemplo 4: Personalize lacunas de colunas de uma caixa de contêineres em HTML
Também podemos personalizar as lacunas entre as colunas. Para alcançar isso, utilizamos a propriedade “Gap de coluna”.

Agora, atribua o “Gap de coluna”Valor da propriedade como“20px”:

coluna Gap: 20px;

Observe a lacuna gerada entre as colunas:

É assim que podemos criar caixas de contêineres em HTML e personalizar seus espaços.

Conclusão

Recipientes são caixas que contêm algum conteúdo dentro deles. O elemento pode ser utilizado para criar uma caixa de contêineres, definindo suas propriedades de largura e altura. No CSS, utilizando o “grade”Também pode executar a mesma operação. Este blog discutiu o método para criar uma caixa de contêineres em html.