Lorem ipsum dolor sit amet
Quisque nisi libero, egestas non bibendum quis, sodales facilisis libero. Nulla ultricies ipsum et lobortis ultrices.
Quisque nisi libero, egestas non bibendum quis, sodales facilisis libero. Nulla ultricies ipsum et lobortis ultrices.
HTML <div class="grid-container"> <article class="post-1"> <div class="post-inner"> <h2>Lorem ipsum dolor sit amet</h2> <p>Quisque nisi libero, egestas non bibendum quis, sodales facilisis libero. Nulla ultricies ipsum et lobortis ultrices.</p> </div> </article> <article class="post-2"></article> <article class="post-3"> <div class="post-inner"> <h3>New arrivals</h3> <a href="">Learn more</a> </div> </article> <article class="post-4"></article> <article class="post-5"> <div class="post-inner"> <h3>New arrivals</h3> <a href="">Learn more</a> </div> </article> <article class="post-6"></article> </div>
CSS .grid-container { max-width: 960px; margin: 50px auto; display: grid; grid-template-rows: repeat(3, 200px); grid-template-columns: repeat(3, 1fr); } .post-1 { display: flex; background: #fff; border: 10px solid #efddd0; grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; } .post-2 { background-image: url(https://html5book.ru/wp-content/uploads/2019/03/grid-img-3.jpg); grid-row-start: 1; grid-column-start: 3; } .post-3 { background: #f4efe9; grid-row-start: 2; grid-column-start: 3; } .post-4 { background-image: url(https://html5book.ru/wp-content/uploads/2019/03/grid-img-1.jpg); grid-row-start: 3; grid-column-start: 3; } .post-5 { background: #f4efe9; grid-row-start: 3; grid-column-start: 2; } .post-6 { background-image: url(https://html5book.ru/wp-content/uploads/2019/03/grid-img-4.jpg); grid-row-start: 3; grid-column-start: 1; }