Um momento
Aula 06
Cursos / Jogo da Velha com HTML, CSS, e JavaScript
Consertando a Estrutura da Grade do Jogo da Velha em HTML e CSS

Summary

## Resumo do Transcript

A discussão aborda a modificação da classe que define a largura e altura dos elementos de um tabuleiro de 384px de largura. Ao dividi-lo por 3, conclui-se que cada espaço deve ter 128px de largura e altura. No entanto, a borda aplicada aos elementos resulta em um alinhamento incorreto, permitindo apenas 2 elementos por linha em vez de 3.

### Ajustes Realizados
- **Tamanho do espaço**: Ajustado para 128px de altura e largura.
- **Flexbox**: O tabuleiro utiliza `display: flex` e `flex-wrap: wrap`.
- **Bordas**: A borda foi inicialmente removida para evitar problemas de dimensionamento.
- Ao adicionar uma borda, a largura total dos elementos excede a largura do container, causando um desajuste no layout. O container foi medido em 384px, mas a adição das bordas não foi contabilizada na largura originalmente calculada para os elementos.

### Conclusão
Os problemas de layout foram causados pelo cálculo incorreto das dimensões ao incluir a borda. É necessário ajustar o cálculo das dimensões para uma melhor apresentação visual.

Video Transcript

O modifica a classe espaço com a largura e altura de cada espaço. Vamos lutar o tabuleiro inteiro tem largura de 384, se você dividir por 3 você pega 128 pra cada um. Vamos lutar o f128px. Agora a borda que está deixando um negócio em 2 por linha em vez de 3. Se eu tirar a borda parece isso. Isso porque a gente não inclui a borda no nosso cálculo do wave. Nesse caso essa borda aqui... Eu vou tirar a borda por enquanto e... O quadrado aqui não é um quadrado, é um retângulo, então vou mudar a height para 128 também. Agora você vai ter esse, esse, esse, esse, esse, esse, esse, esse, esse, tá? Então vamos atualizar a nossa folha de estilos. Tem a height e wave de 128 para o espaço. Vou tirar a borda aqui. Tá, wave 128px, height também 128px, tá? E o tabuleiro display flex, flex wrap, traço wrap é wrap, tá? Então salvei ele automaticamente. Deu reload, tá? Agora vamos adieitar a borda de cada cara. Então começando do... A esquerda acima, esquerda acima vai ter... Eu vou adicionar a borda do elemento aqui, isso é parado do espaço, tá? Então vamos ter border à direita de... Vamos botar um pixel, espaço solid, espaço black, tá? Depois a gente vai... Vamos aumentar isso. 2, 3, 4, 5, 6, que tal 6? Então eu meter para 6. Ah, vou botar 3, tá? Para complementar com o do lado. Agora se eu adicionar a borda, note que o negócio fica errado agora. Porque a borda não é parte da... O container inteiro tem... Olha aqui, ó. 344x512. 384 de... Largura. Dividido por 328, mas a gente não... Não contou a borda, a borda adiciona a largura do cara. Então fica mais do que a linha pode... Mais que a linha pode conter, né? Então...
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: