I am working on a project. Then I noticed this layout: Instagram redesign
I somehow manage to do pretty same layout in CSS with the help of grid-template-areas and grid-area properties.
Here are my code:
HTML
<div class="posts-wrapper">
<div class="post">
<div class="post-header flex justify-between items-center">
<div class="post-author flex items-center">
<div class="post-author-img flex">
<img src="img/avatar/avatar-1.png" alt="Post author image">
</div>
<div class="post-author-info">
<p class="post-author-name">nkchaudhary01</p>
<span class="post-author-address">Mumbai, India</span>
</div>
</div>
<div class="post-action flex">
<img src="img/icons/icon-dots.svg" alt="Dots icon">
</div>
</div>
<div class="post-banner flex">
<img src="img/fox.png" alt="Fox">
</div>
<div class="post-body">
<div class="post-actions flex justify-between">
<div class="post-actions-left flex">
<div class="post-action">
<img src="img/icons/icon-love.svg" alt="Love icon">
</div>
<div class="post-action">
<img src="img/icons/icon-comment.svg" alt="Comment icon">
</div>
<div class="post-action">
<img src="img/icons/icon-share.svg" alt="Share icon">
</div>
</div>
<div class="post-actions-right">
<div class="post-action">
<img src="img/icons/icon-bookmark.svg" alt="Bookmark icon">
</div>
</div>
</div>
<div class="post-info flex items-center justify-between">
<p class="post-info-text">
Liked by <strong>Edward Jones and 254 others</strong>
</p>
<div class="post-info-img-wrapper flex items-center">
<img src="img/avatar/avatar-2.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-3.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-4.png" alt="Avatar Image" class="post-info-img">
</div>
</div>
<div class="post-content">
<p class="post-text">Fox can be smarter than a wolf... (More)</p>
<span class="post-date">Wed, 26 January 2021</span>
</div>
</div>
</div>
<div class="post">
<div class="post-header flex justify-between items-center">
<div class="post-author flex items-center">
<div class="post-author-img flex">
<img src="img/avatar/avatar-2.png" alt="Post author image">
</div>
<div class="post-author-info">
<p class="post-author-name">cameron_will</p>
<span class="post-author-address">New Delhi, India</span>
</div>
</div>
<div class="post-action flex">
<img src="img/icons/icon-dots.svg" alt="Dots icon">
</div>
</div>
<div class="post-banner flex">
<img src="img/parrot.png" alt="Parrot">
</div>
<div class="post-body">
<div class="post-actions flex justify-between">
<div class="post-actions-left flex">
<div class="post-action">
<img src="img/icons/icon-love.svg" alt="Love icon">
</div>
<div class="post-action">
<img src="img/icons/icon-comment.svg" alt="Comment icon">
</div>
<div class="post-action">
<img src="img/icons/icon-share.svg" alt="Share icon">
</div>
</div>
<div class="post-actions-right">
<div class="post-action">
<img src="img/icons/icon-bookmark.svg" alt="Bookmark icon">
</div>
</div>
</div>
<div class="post-info flex items-center justify-between">
<p class="post-info-text">
Liked by <strong>Lucas and 903 others</strong>
</p>
<div class="post-info-img-wrapper flex items-center">
<img src="img/avatar/avatar-1.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-2.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-3.png" alt="Avatar Image" class="post-info-img">
</div>
</div>
<div class="post-content">
<p class="post-text">Million Parrots in india Like a Family... (More)</p>
<span class="post-date">Wed, 26 January 2021</span>
</div>
</div>
</div>
<div class="post">
<div class="post-header flex justify-between items-center">
<div class="post-author flex items-center">
<div class="post-author-img flex">
<img src="img/avatar/avatar-3.png" alt="Post author image">
</div>
<div class="post-author-info">
<p class="post-author-name">codyfisher</p>
<span class="post-author-address">New Delhi, India</span>
</div>
</div>
<div class="post-action flex">
<img src="img/icons/icon-dots.svg" alt="Dots icon">
</div>
</div>
<div class="post-banner flex">
<img src="img/panda.png" alt="Panda">
</div>
<div class="post-body">
<div class="post-actions flex justify-between">
<div class="post-actions-left flex">
<div class="post-action">
<img src="img/icons/icon-love.svg" alt="Love icon">
</div>
<div class="post-action">
<img src="img/icons/icon-comment.svg" alt="Comment icon">
</div>
<div class="post-action">
<img src="img/icons/icon-share.svg" alt="Share icon">
</div>
</div>
<div class="post-actions-right">
<div class="post-action">
<img src="img/icons/icon-bookmark.svg" alt="Bookmark icon">
</div>
</div>
</div>
<div class="post-info flex items-center justify-between">
<p class="post-info-text">
Liked by <strong>Yen and 127 others </strong>
</p>
<div class="post-info-img-wrapper flex items-center">
<img src="img/avatar/avatar-5.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-6.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-4.png" alt="Avatar Image" class="post-info-img">
</div>
</div>
<div class="post-content">
<p class="post-text">Lazy Weekend</p>
<span class="post-date">Wed, 26 January 2021</span>
</div>
</div>
</div>
<div class="post">
<div class="post-header flex justify-between items-center">
<div class="post-author flex items-center">
<div class="post-author-img flex">
<img src="img/avatar/avatar-4.png" alt="Post author image">
</div>
<div class="post-author-info">
<p class="post-author-name">pat.rick96</p>
<span class="post-author-address">New Delhi, India</span>
</div>
</div>
<div class="post-action flex">
<img src="img/icons/icon-dots.svg" alt="Dots icon">
</div>
</div>
<div class="post-banner flex">
<img src="img/turtle.png" alt="Turtle">
</div>
<div class="post-body">
<div class="post-actions flex justify-between">
<div class="post-actions-left flex">
<div class="post-action">
<img src="img/icons/icon-love.svg" alt="Love icon">
</div>
<div class="post-action">
<img src="img/icons/icon-comment.svg" alt="Comment icon">
</div>
<div class="post-action">
<img src="img/icons/icon-share.svg" alt="Share icon">
</div>
</div>
<div class="post-actions-right">
<div class="post-action">
<img src="img/icons/icon-bookmark.svg" alt="Bookmark icon">
</div>
</div>
</div>
<div class="post-info flex items-center justify-between">
<p class="post-info-text">
Liked by <strong>Jessica and 103 others </strong>
</p>
<div class="post-info-img-wrapper flex items-center">
<img src="img/avatar/avatar-5.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-1.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-6.png" alt="Avatar Image" class="post-info-img">
</div>
</div>
<div class="post-content">
<p class="post-text">Underwater heaven... (More)</p>
<span class="post-date">Wed, 26 January 2021</span>
</div>
</div>
</div>
<div class="post">
<div class="post-header flex justify-between items-center">
<div class="post-author flex items-center">
<div class="post-author-img flex">
<img src="img/avatar/avatar-5.png" alt="Post author image">
</div>
<div class="post-author-info">
<p class="post-author-name">murphy.june</p>
<span class="post-author-address">New Delhi, India</span>
</div>
</div>
<div class="post-action flex">
<img src="img/icons/icon-dots.svg" alt="Dots icon">
</div>
</div>
<div class="post-banner flex">
<img src="img/lizard.png" alt="Lizard">
<img src="img/icons/icon-play.svg" alt="Play icon" class="post-banner-icon">
<p class="post-banner-time">01:29</p>
</div>
<div class="post-body">
<div class="post-actions flex justify-between">
<div class="post-actions-left flex">
<div class="post-action">
<img src="img/icons/icon-love.svg" alt="Love icon">
</div>
<div class="post-action">
<img src="img/icons/icon-comment.svg" alt="Comment icon">
</div>
<div class="post-action">
<img src="img/icons/icon-share.svg" alt="Share icon">
</div>
</div>
<div class="post-actions-right">
<div class="post-action">
<img src="img/icons/icon-bookmarked.svg" alt="Bookmark icon">
</div>
</div>
</div>
<div class="post-info flex items-center justify-between">
<p class="post-info-text">
Viewed by <strong>Karl and 387 others</strong>
</p>
<div class="post-info-img-wrapper flex items-center">
<img src="img/avatar/avatar-4.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-5.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-2.png" alt="Avatar Image" class="post-info-img">
</div>
</div>
<div class="post-content">
<p class="post-text">Fox can be smarter than a wolf... (More)</p>
<span class="post-date">Wed, 26 January 2021</span>
</div>
</div>
</div>
<div class="post">
<div class="post-header flex justify-between items-center">
<div class="post-author flex items-center">
<div class="post-author-img flex">
<img src="img/avatar/avatar-6.png" alt="Post author image">
</div>
<div class="post-author-info">
<p class="post-author-name">hawkins360</p>
<span class="post-author-address">New Delhi, India</span>
</div>
</div>
<div class="post-action flex">
<img src="img/icons/icon-dots.svg" alt="Dots icon">
</div>
</div>
<div class="post-banner flex">
<img src="img/giraffe.png" alt="Giraffe">
</div>
<div class="post-body">
<div class="post-actions flex justify-between">
<div class="post-actions-left flex">
<div class="post-action">
<img src="img/icons/icon-love.svg" alt="Love icon">
</div>
<div class="post-action">
<img src="img/icons/icon-comment.svg" alt="Comment icon">
</div>
<div class="post-action">
<img src="img/icons/icon-share.svg" alt="Share icon">
</div>
</div>
<div class="post-actions-right">
<div class="post-action">
<img src="img/icons/icon-bookmark.svg" alt="Bookmark icon">
</div>
</div>
</div>
<div class="post-info flex items-center justify-between">
<p class="post-info-text">
Liked by <strong>Nanny and 739 others </strong>
</p>
<div class="post-info-img-wrapper flex items-center">
<img src="img/avatar/avatar-2.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-1.png" alt="Avatar Image" class="post-info-img">
<img src="img/avatar/avatar-4.png" alt="Avatar Image" class="post-info-img">
</div>
</div>
<div class="post-content">
<p class="post-text">Hi Everyone are you enjoying... (More)</p>
<span class="post-date">Wed, 26 January 2021</span>
</div>
</div>
</div>
</div>
CSS
.posts-wrapper {
display: grid;
grid-template-areas:
"post-1 post-2 post-3"
"post-1 post-2 post-3"
"post-1 post-2 post-3"
"post-1 post-2 post-3"
"post-4 post-2 post-6"
"post-4 post-5 post-6"
"post-4 post-5 post-6"
"post-4 post-5 post-6";
gap: 2.5rem 2rem;
}
.post:nth-child(1) {
grid-area: post-1;
}
.post:nth-child(2) {
grid-area: post-2;
}
.post:nth-child(3) {
grid-area: post-3;
}
.post:nth-child(4) {
grid-area: post-4;
}
.post:nth-child(5) {
grid-area: post-5;
}
.post:nth-child(6) {
grid-area: post-6;
}
But I wanted to know that is there a better way to achieve this layout?
