Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Posicionamento com GRID

Não estou conseguindo posiocionar o "botão" (ver + fotos) no centro e deixar a borda bem próxima ao nome, quando eu utilizo alguns elementos pra tentar fazer ele ficar ajustado ao centro, ele fica na esquerda, e a imagem do casal em pé preenchendo a coluna até onde tem a última imagem com várias pessoas. Abaixo vou deixar o código HTML e estilizações CSS desses elementos, quem puder me ajudar agradeço. Estou tentando práticar alguns conceitos que aprendi. obs: linhas/blocos rosa é o container geral da seção e linhas/blocos amarelo é o containergrid (apenas das imagens) Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeO modelo que é pra ficar é igual esse de cima, só que com a largura do botão menor e centralizado.

HTML

<section class="container" id="ensaios">
            <h3 class="subtitulo">Casamento</h3>
            <p class="texto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam quas non temporibus suscipit eveniet laudantium optio eligendi nulla quia in porro, error maxime, reprehenderit, culpa inventore ab possimus similique quibusdam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum vel esse officia consequuntur voluptatum odio. <br><strong>OBS:Passe o mouse por cima das imagens para deixa-lá coloridas.</strong></p>

            <div class="container__grid">
                <img src="img/casamento-alianca.jpg" alt="Noivos trocando aliança" class="container__grid-img">
                <img src="img/casamento-noivos.jpg" alt="Noivos no altar" class="container__grid-img">
                <img src="img/casamento-noivos2.jpg" alt="Noivos Brindando" class="container__grid-img">
                <img src="img/casamento-padrinhos.jpg" alt="Noivos comemorando com amigos" class="container__grid-img">
            </div>
            <a href="#" class="botao">Ver + Fotos</a>
        </section>

CSS

    display: grid;    
    grid-template-areas:
    "titulo imagem"
    "texto imagem"    
    "botao imagem";    
    column-gap: 2rem;
}

.container h3 {
    grid-area: titulo;
}

.container p {
    grid-area: texto;
}

.container div {
    grid-area: imagem;
}

.container a {
    grid-area: botao;    
}

.container h3,
.container p,
.container a {
    text-align: center;
}

.container p {
    text-align: justify;
}

.container__grid {
    display: grid;
    gap: 1rem;    
}

.container__grid img:nth-child(1) {
    grid-column: 2/3;
    grid-row: 1/2;
}

.container__grid img:nth-child(2) {
    grid-column: 1/2;
    grid-row: 1/4;    
}

.container__grid img:nth-child(3) {
    grid-column: 2/3;
    grid-row: 2/3;
}

.container__grid img:nth-child(4) {
    grid-column: 2/3;
    grid-row: 3/4;
}

.container__grid-img {
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    filter: grayscale(100%);
    transition: 0.4s;   
}
.container__grid-img:hover {
    filter: none;
}```
3 respostas

vc tem que manda o código completo

solução!

Oi, Sávio. Acredito que a página está se comportando assim porque o botão está diretamente dentro do conteiner (onde o grid está sendo aplicado), por isso ele está ocupando todo o espaço disponível para aquela determinada coluna e linha.

Uma sugestão de solução é você colocar o botão dentro de uma div e estilizar o botão dentro dela, pois assim apenas a div vai ocupar o espaço do grid, e o botão ficará dependente da div.

Ou também você pode colocar todo o texto e o botão dentro de uma única div e adaptar seu CSS para lidar com duas colunas (que tem o mesmo efeito da sugestão acima, porém dessa forma o texto e o botão ficarão juntos no HTML, o que pode ser mais semântico nessa situação)

Obrigado Ethaniel, ajudou muito, fiz o que falou e deu super certo.