Một số layout thông dụng, Sidebar, Card, Masonry

<div class="container">
    <div class="main">
      <p style="color:#fff;">MAIN</p>
    </div>
    <div class="sidebar">
      <p>SIDEBAR</p>
    </div>
  </div>

.container {
    height: 100vh;
    background-color: #EFF9FF;
    display: flex;
}

.main {
    flex: 1;
    background-color: #164172;
}
.sidebar {
    flex-basis: 30%;
    background-color: #FFFF40;
}

<div class="cards">
    <div class="cards__item"></div>
    <div class="cards__item"></div>
    <div class="cards__item"></div>
 </div>

.cards {
    display: flex;
    margin-left: -8px;
    margin-right: -8px;
}
.cards__item {
    flex-basis: 25%;
    padding-left: 8px;
    padding-right: 8px;
}

<div class="masonry-grid">
    <!--Item -->
    <div class="masonry-grid__item">...</div>
    <div class="masonry-grid__item">...</div>
    <div class="masonry-grid__item">...</div>
</div>

.masonry-grid {
    column-count: 3;
    column-gap: 1rem;
    width: 100%;
}

.masonry-grid__item {
    break-inside: avoid;
    margin-bottom: 1rem;
}