How to add more rows and columns to this grid css

user_2729887 0
Viewed 62

i am trying to fix a grid template but somehow i am not able to fix the 5th post and image. When i try to add the sixth post it is displaced and comes in left. I want it to be in right position just like the fourth element.

<figure class="featured-image-6">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/579121/tim-marshall-189232-sm.jpg" alt="Photo by Tim Marshall on Unsplash">
    </figure>
    <div class="number-6">6</div>
    <article class="article article-6">
        <h2>This is 6th Article</h2>
        <p>One of the villagers, Kristina Halvorson from Adaptive Path, holds steadfastly to the notion that design can’t be tested without real content.</p>
    </article>

This post is not aligned. Can someone please help me fix it.. See the Link

grid css html
1 Answers

Inside the media query you should add this code to define the column and row of the 6th post.

    .featured-image-6,
    .number-6 {
      grid-column: 3 / 5;
      grid-row: 7 / 8;
    }
    .article-6 {
      grid-column: 3 / 5;
      grid-row: 8 / 9;
    }
user_41022030
Related