Multi-Column Content Layout with CSS Grid

<div class="article-layout">
  <div class="featured-section">
    <h2>Featured Article Title</h2>
    <p>This is a compelling summary of the featured content...</p>
    <a href="#">Read More</a>
  </div>
  <div class="main-content">
    <h1>Main Article Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <aside class="sidebar">
    <h3>Related Posts</h3>
    <ul>
      <li><a href="#">Post 1</a></li>
      <li><a href="#">Post 2</a></li>
      <li><a href="#">Post 3</a></li>
    </ul>
  </aside>
</div>

.article-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* 3 columns: sidebar | main | sidebar */
  grid-template-rows: auto; /* Rows adjust to content */
  gap: 1.5rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.featured-section {
  grid-column: 1 / -1; /* Span across all columns */
  background-color: #e6f7ff;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 1rem;
}

.main-content {
  grid-column: 2 / 3; /* Place in the second column */
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
}

.sidebar {
  grid-column: 3 / 4; /* Place in the third column */
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
}

@media (max-width: 992px) {
  .article-layout {
    grid-template-columns: 1fr 2fr; /* Two columns: sidebar | main */
    grid-template-areas:
      "featured featured"
      "sidebar  main";
  }
  .main-content { grid-area: main; }
  .sidebar { grid-area: sidebar; }
  .featured-section { grid-area: featured; margin-bottom: 0; }
}

@media (max-width: 768px) {
  .article-layout {
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-areas:
      "featured"
      "main"
      "sidebar";
  }
}