2

So I'm attempting to create a grid like this

Where I have the top and bottom posts the same size and have one post in the middle slim down and auto-fill the remaining space.

Here is my code

<section class="posts-grid">
  <article class="post">
    <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png?width=1464&name=pitchadri.png" alt="">

    <div class="blog-listing-info">
      <a href="#">
        <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
      </a>
      <p class="blog-listing-tag">Design - 11 min read</p>
    </div>
  </article>

  <article class="post">
    <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png?width=1464&name=pitchadri.png" alt="">

    <div class="blog-listing-info">
      <a href="#">
        <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
      </a>
      <p class="blog-listing-tag">Design - 11 min read</p>
    </div>
  </article>

  <article class="post long-post">
    <div class="blog-listing-info">
      <a href="#">
        <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
      </a>
      <p class="blog-listing-tag">Design - 11 min read</p>
    </div>
  </article>

  <article class="post">
    <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png?width=1464&name=pitchadri.png" alt="">

    <div class="blog-listing-info">
      <a href="#">
        <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
      </a>
      <p class="blog-listing-tag">Design - 11 min read</p>
    </div>
  </article>

  <article class="post">
    <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png?width=1464&name=pitchadri.png" alt="">

    <div class="blog-listing-info">
      <a href="#">
        <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
      </a>
      <p class="blog-listing-tag">Design - 11 min read</p>
    </div>
  </article>

  <article class="post">
    <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png?width=1464&name=pitchadri.png" alt="">

    <div class="blog-listing-info">
      <a href="#">
        <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
      </a>
      <p class="blog-listing-tag">Design - 11 min read</p>
    </div>
  </article>
</section>

css

.posts-grid {
    grid-template-areas:
    "post post"
    "long-post post"
    "post post";
    grid-template-columns: 15% 1fr;
    grid-template-rows: 80px 1fr;
    grid-auto-rows: 385px;
    grid-column-gap: 23px;
    grid-row-gap: 20px;
    height: 100vh;
    display: grid;
  }

  .post { grid-area: post; }
  .post.long-post { grid-area: long-post !important; }

I have created a codepen https://codepen.io/ben_bagley/pen/30272c1f61b4f20c080040f5359bd5f1 but as you can see it it's ignoring a good like so

Any help in getting the desired effect is appreciated.

Improve this question
9
  • you can alternate different sub gird, here is an idea with another layout : stackoverflow.com/questions/52898785/… Commented Dec 20, 2018 at 22:13
  • Instead of having two columns, set the grid to, let's say, 10 or 20 columns. Then span grid areas as needed. For instance, the top left item can span 5 columns. The bottom left item can span 10. Commented Dec 20, 2018 at 23:55
  • Could you provide an example @Michael_B I'm new to the grid system Commented Dec 20, 2018 at 23:58
  • Actually, the correct approach (per the guidelines) is for you to post enough code in your question to reproduce the problem. We can then work off of that. Commented Dec 21, 2018 at 0:02
  • I created a new question here @Michael_B stackoverflow.com/questions/53877736/… Commented Dec 21, 2018 at 0:29

1 Answer 1

Reset to default
0

this is the best I could do, I hope it helps.

HTML:

<section class="posts-grid">
    <article class="post">
        <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png? 
         width=1464&name=pitchadri.png" alt="">

        <div class="blog-listing-info">
        <a href="#">
            <h2 class="blog-listing-title">13 things to make your US and UI design 
            much better</h2>
        </a>
        <p class="blog-listing-tag">Design - 11 min read</p>
        </div>
    </article>

    <article class="post">
        <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png? 
width=1464&name=pitchadri.png" alt="">

        <div class="blog-listing-info">
        <a href="#">
            <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
        </a>
        <p class="blog-listing-tag">Design - 11 min read</p>
        </div>
    </article>

    <article class="post">
        <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png?width=1464&name=pitchadri.png" alt="">

        <div class="blog-listing-info">
        <a href="#">
            <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
        </a>
        <p class="blog-listing-tag">Design - 11 min read</p>
        </div>
    </article>

    <article class="long-post">
        <div class="blog-listing-info">
        <a href="#">
            <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
        </a>
        <p class="blog-listing-tag">Design - 11 min read</p>
        </div>
    </article>

    <article class="post">
        <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png?width=1464&name=pitchadri.png" alt="">

        <div class="blog-listing-info">
        <a href="#">
            <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
        </a>
        <p class="blog-listing-tag">Design - 11 min read</p>
        </div>
    </article>

    <article class="post">
        <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png?width=1464&name=pitchadri.png" alt="">

        <div class="blog-listing-info">
        <a href="#">
            <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
        </a>
        <p class="blog-listing-tag">Design - 11 min read</p>
        </div>
    </article>

    <article class="post">
        <img src="https://blog.flyingsaucer.nyc/hs-fs/hubfs/blog/pitchadri.png?width=1464&name=pitchadri.png" alt="">

        <div class="blog-listing-info">
        <a href="#">
            <h2 class="blog-listing-title">13 things to make your US and UI design much better</h2>
        </a>
        <p class="blog-listing-tag">Design - 11 min read</p>
        </div>
    </article>
</section>

The SCSS:

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
   .posts-grid {
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    .post, .long-post {
        padding: 10px;
        border-radius: 6px;
    }

    .post:first-child, .long-post + .post {
        background: greenyellow;
        grid-column-end: span 3;
    }
    .post + .post + .post {
        grid-column-end: span 1;
    }
    .post {
        background: lightblue;
        grid-column-start: auto;
        grid-column-end: span 2;
    }

    .long-post {
        background: red;
        grid-column-end: span 4;
    }

    img {
        width: 100%;
        height: auto;
    }
}

And here is the JsFiddle: https://jsfiddle.net/cisco336/ebt0zfvr/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.