Aula 06
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: