Template com CSS Grid - #3 Main

Nesse tutorial vamos continuar a trabalhar com CSS Grid desenvolvendo a parte do main do nosso layout.

Desenvolvendo Template com CSS Grid

index.html

No index implementaremos os elementos de marcação html:

<main>
    <div class="slide">
        <div class="slide__foto">
            <img src="./img/slide.jpg" alt="">
        </div>

        <div class="slide__text">
            <strong>PGR vai investigar</strong>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus amet aperiam asperiores cupiditate dignissimos quaerat tempore. Cum dolorem facilis neque obcaecati repudiandae temporibus vero vitae. Ad dicta numquam quasi.</p>
        </div>

        <div class="slide__thumb">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>


    <div class="container-news">
        <div class="news">
            <div class="news__img">
                <img src="./img/news.jpg" alt="">
            </div>

            <div class="news__text">
                <strong>Notícia X</strong>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor dolorem eum fuga hic nam</p>
            </div>

            <div class="news__comment">
                <img src="./img/comment.jpg" alt="">
            </div>
        </div>

        <div class="news">
            <div class="news__img">
                <img src="./img/news.jpg" alt="">
            </div>

            <div class="news__text">
                <strong>Notícia X</strong>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor dolorem eum fuga hic nam</p>
            </div>

            <div class="news__comment">
                <img src="./img/comment.jpg" alt="">
            </div>
        </div>

        <div class="news">
            <div class="news__img">
                <img src="./img/news.jpg" alt="">
            </div>

            <div class="news__text">
                <strong>Notícia X</strong>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor dolorem eum fuga hic nam</p>
            </div>

            <div class="news__comment">
                <img src="./img/comment.jpg" alt="">
            </div>
        </div>

        <div class="news">
            <div class="news__img">
                <img src="./img/news.jpg" alt="">
            </div>

            <div class="news__text">
                <strong>Notícia X</strong>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor dolorem eum fuga hic nam</p>
            </div>

            <div class="news__comment">
                <img src="./img/comment.jpg" alt="">
            </div>
        </div>
    </div>

</main>

style.css

No css faremos a estilização do slide, das thumbnails e das notícias, lembrando que o foco aqui não é criar um slideshow dinâmico e sim repartir o layout com CSS, por isso não utilizaremos javascript pra animar o slide:

.slide{
    display:grid;
    grid-template-columns: 65% 35%;
    background: #82695F;
    grid-template-areas:
        "slide__foto slide__text"
        "slide__thumb slide__thumb"
    ;
    align-items: center;
}
.slide__foto{grid-area:slide__foto;}
.slide__foto img{vertical-align: middle;}
.slide__text{grid-area:slide__text;padding: 0 5%;line-height: 30px;}
.slide__thumb{
    grid-area:slide__thumb;
    display: grid;
    grid-template-columns: repeat(5,19%);
    justify-content: space-between;
    padding-top: 10px;
    background: #fff;
}
.slide__thumb div{height: 100px;background: gray;}

.container-news{
    display:grid;
    margin-top: 30px;
    grid-row-gap: 30px;
}
.news{
    display:grid;
    grid-template-columns: 28% 58% 10%;
    justify-content: space-between;
    line-height: 30px;
    align-items: center;
}
.news__comment{
    text-align: center;
}

Por hoje é só! Sucesso nos códigos e na vida!

Would you like to be a frontend developer? webdesignemfoco@gmail.com